使用JavaScript获取画布的宽度和高度

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); 来获取值，但返回了 undefined。我认为问题出在我使用 style 标签将画布设置为自适应大小上。

有什么其他方法可以获得画布的宽度和高度吗？

非常感谢任何建议。

- heyitsqueon

Answer 1

对于宽度和高度，画布是一种特殊情况。

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属性，则画布分辨率将默认为300x150。

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

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

还有，正如评论中指出的那样。只有在设置了样式属性时才会可用。

- Blindman67

---

仅当画布元素在其style属性中具有XXX时，ctx.canvas.style.XXX才有效：它不会从例如StyleSheet中获取。最好使用clientXXX或offsetXXX，甚至更好的是getBoundingClientRect()。 - Kaiido

Answer 2

因为你使用了style属性设置canvas的宽度和高度，所以你可以像这样获取它的可见宽度和高度...

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

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

- ɢʀᴜɴᴛ

---

似乎即使没有通过样式属性设置值，也可以完成这项操作。之前我使用以下代码获取值，但是您的解决方案更简单，无论是否使用样式属性。 var height = parseFloat(window.getComputedStyle(ctx).getPropertyValue('height')); - jkofron.e