Question

我目前正在尝试接收画布的宽度和高度。画布使用样式参数，如以下代码所示：

<canvas id="ctx" style="height: calc(100vh - 142px); width: 100vw; display: block;"></canvas>

<script type="text/javascript">
    var ctx = document.getElementById("ctx").getContext("2d");

    console.log(ctx.width);

    var socket = io();

    socket.on('newPosition', function(data){
        ctx.clearRect(0, 0, ctx.width, ctx.height);
        ctx.fillText('P', data.x, data.y);
    })
</script>

我尝试使用返回未定义值的console.log(ctx.width);来获取值。我认为问题出现是因为我使用样式标签将画布设置为自动调整大小。

我怎么能以另一种方式获得画布宽度和高度？

我感谢任何建议。

Answer 1

因为你已经使用style属性设置了画布宽度和高度，你可以得到它的可见宽度和高度，就像这样......

＆＃13;

var ctx = document.getElementById("ctx").getContext("2d");

var canvas_width = ctx.canvas.clientWidth;
var canvas_height = ctx.canvas.clientHeight;

console.log(canvas_width, canvas_height);

＆＃13;

<canvas id="ctx" style="height: calc(100vh - 142px); width: 100vw; display: block; border: 1px solid black;"></canvas>

＆＃13;

Answer 2

当涉及宽度和高度时，画布是一种特殊情况。

canvas.style.width和canvas.style.height定义了页面上显示的画布的宽度和高度。

canvas.width和canvas.height属性定义画布的大小（以像素为单位）或画布的分辨率。画布分辨率并不总是与画布显示大小匹配。

只需获取宽度和高度属性即可获得画布分辨率。

var width = canvas.width;
var height = canvas.height;

画布分辨率最后没有任何单位，因此可以直接转换为Number。 canvas.width和canvas.height属性始终以像素为单位。

如果您未设置canvas.width和canvas.height属性，则画布分辨率默认为300 x 150。

您可以通过context.canvas属性访问2D上下文画布。上下文没有width和height属性。

 // get resolution
 var width = ctx.canvas.width;
 var height = ctx.canvas.height;

 // get display size. Note values will have units eg px,em,%
 var displayWidth = ctx.canvas.style.width;
 var displayHeight = ctx.canvas.style.height;

哦，正如评论中指出的那样。样式属性仅在设置时可用。

使用javascript获取画布宽度和高度

2 个答案: