使用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);返回未定义值的值。我认为出现问题是因为我使用样式标签将画布设置为自动大小。

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

我很欣赏任何形式的建议。

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

您可以通过属性访问 2D 上下文画布context.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;

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

Answer 2

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

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>