javascript - 使用javascript获取 Canvas 宽度和高度

Question

我目前正在尝试接收 Canvas 的宽度和高度。 Canvas 使用样式参数，您可以在以下代码中看到:

<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); 获取值。我认为出现问题是因为我使用样式标签将 Canvas 设置为自动调整大小。

如何以其他方式接收 Canvas 宽度和高度？

我很感激任何类型的建议。

Answer 1

Canvas 在宽度和高度方面是一个特例。

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

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

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

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

Canvas 分辨率末尾没有任何单位，因此可以直接转换为数字。 canvas.width 和 canvas.height 属性始终以像素为单位。

如果您不设置 canvas.width 和 canvas.height 属性， Canvas 分辨率将默认为 300 x 150。

您可以通过 context.canvas 属性访问 2D 上下文 Canvas 。上下文没有宽度和高度属性。

 // 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;

哦，正如评论中指出的那样。样式属性只有在设置后才可用。