如何获取 HTML5 画布的宽度和高度？

javascript html canvas

2022-08-30 05:32:48

如何在JavaScript中获取canvas元素的宽度和高度？

另外，我一直在阅读的画布的“上下文”是什么？

答案 1

可能值得一看教程：MDN画布教程

只需访问 canvas 元素的这些属性，即可获取该元素的宽度和高度。例如：

var canvas = document.getElementById('mycanvas');
var width = canvas.width;
var height = canvas.height;

如果画布元素中不存在宽度和高度属性，则将返回默认的 300x150 大小。若要动态获取正确的宽度和高度，请使用以下代码：

const canvasW = canvas.getBoundingClientRect().width;
const canvasH = canvas.getBoundingClientRect().height;

或者使用较短的对象解构语法：

const { width, height } = canvas.getBoundingClientRect();

这是您从画布中获取的对象，允许您在其中绘制。您可以将它视为画布的 API，它为您提供了使您能够在画布元素上绘制的命令。contextcontext

答案 2

好吧，之前的所有答案都不完全正确。2个主要浏览器不支持这2个属性（IE是其中之一）或以不同的方式使用它们。

更好的解决方案（大多数浏览器都支持，但我没有检查Safari）：

var canvas = document.getElementById('mycanvas');
var width = canvas.scrollWidth;
var height = canvas.scrollHeight;

至少我用 scrollWidth 和 -Height 得到正确的值，并且在调整大小时必须设置 canvas.width 和 height。