从移相器获取高度和宽度 canvas

Question

所以我使用 phaser.io 但我想打印一个数组所以我在我的页面中创建它 html.

要放置我的数组的高度和宽度，我需要知道我的 canvas.

的高度和宽度

所以我应该这样做:

$('canvas').height();

任务完成。

但是没有陷阱我的 canvas 看起来像这样:

<canvas width="1261" height="1101" style="display: block; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 1059px; height: 925px; cursor: inherit; margin-left: 1px; margin-right: 0px; margin-top: 0px;"></canvas>

而且每次它 return 我的值来自高度而不是来自样式的值。

所以我尝试其他方式:

$('canvas').css('height');
$('canvas').[0].style.height;
$('canvas')[0].style.cssText;

但是我总是得到错误的结果

超级奇怪的是当我这样做的时候:

console.log($('canvas')[0].style)

我在元素 'height' 和 'cssText' 中看到了我想要的结果。我把部分结果放在这里：

 0:"display"
    1:"touch-action"
    2:"user-select"
    3:"-webkit-tap-highlight-color"
    4:"width"
    5:"height"
    6:"margin-left"
    7:"margin-right"
    8:"margin-top"
    ...
    cssText:"display: block; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 1059px; height: 925px; margin-left: 1px; margin-right: 0px; margin-top: 0px;"
    ...
    height:"925px"
    ...

谁能告诉我为什么？给我一个解决方案也可以。

======= 编辑 =======

当我点击一个元素执行 $('canvas').height() 时，我得到了一些消息。实际上我可以处理它，但我仍然不明白为什么我这样做了:

console.log($('canvas')[0].style.cssText);
console.log($('canvas').height());

一个接一个我得到不同的结果。当然是加载时间的问题...但对我来说还是不太好。

window.onload = function() {
 
 var Level = {
  preload: function()
  {
   console.log("toto");
  },
        create: function()
  {
   console.log($('canvas').height());
   console.log($('canvas')[0].style.cssText);
   
   this.scale.pageAlignHorizontally = true;
      this.scale.pageAlignVertically = true;
      this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
            this.scale.refresh();
  }
    }
 const SAFE_ZONE_WIDTH=640;
 const SAFE_ZONE_HEIGHT=1101;

 var w = window.innerWidth ;
 var h = window.innerHeight ;
 var aspectRatioDevice = w/h;

 var aspectRatioSafeZone = SAFE_ZONE_WIDTH / SAFE_ZONE_HEIGHT;
 var extraWidth = 0, extraHeight = 0, offsetWidth = 0;
 if (aspectRatioSafeZone < aspectRatioDevice) 
 {
  // have to add game pixels horizontally in order to fill the device screen
  extraWidth = aspectRatioDevice * SAFE_ZONE_HEIGHT - SAFE_ZONE_WIDTH;
  offsetWidth = extraWidth/2;
 } 
 else 
 {
  // have to add game pixels vertically
  extraHeight = SAFE_ZONE_WIDTH / aspectRatioDevice - SAFE_ZONE_HEIGHT;
 }

 var game = new Phaser.Game( SAFE_ZONE_WIDTH + extraWidth, SAFE_ZONE_HEIGHT + extraHeight, Phaser.CANVAS, 'game_div');

 game.state.add('Level', Level);
 game.state.start('Level');
}

<!DOCTYPE HTML>
<html>
<head>

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, height = device-height, user-scalable=no, target-densitydpi = device-dpi" />
<title>niuniu</title>
<script>
    screen.orientation.lock('portrait');
</script>
<script src="https://github.com/photonstorm/phaser-ce/releases/download/v2.9.4/phaser.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
 
</body>
</html>

Answer 1

尽量利用

$('canvas').height() 或

$('canvas').attr('height') 或

$('canvas').css('height')

console.log($('canvas').height());
console.log($('canvas').css('height'));
console.log($('canvas').attr('height'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas width="1261" height="1101" style="display: block; touch-action: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 1059px; height: 925px; cursor: inherit; margin-left: 1px; margin-right: 0px; margin-top: 0px;"></canvas>

Answer 2

当您初始化 Phaser 时，它通常看起来像这样：

var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, 'game');

或类似的东西。您可以使用您设置的等于 Phaser.Game 的任何变量（在我的例子中它是 game。要获得宽度，您需要做的就是

var width = game.width;
var height = game.height;

希望对您有所帮助。

Answer 3

在 Phaser (v3) 中，您可以访问 game.canvas，这是 canvas（元素）Phaser 运行开启，因此：

const game = new Phaser.Game({ ... });
console.log(game.canvas.width, game.canvas.height);

从移相器获取高度和宽度 canvas

Get height and width from a phaser canvas

html

javascript

css

jquery

phaser-framework