如何获得HTML5画布的宽度和高度？
如何获得HTML5画布的宽度和高度？
提问于 2010-10-27 18:24:51
如何在JavaScript中获得画布元素的宽度和高度？
另外，我一直在读的画布的“上下文”是什么？
回答 6
Stack Overflow用户
回答已采纳
发布于 2010-10-27 18:26:21
也许值得看一看教程：MDN Canvas Tutorial
只需访问元素的这些属性，就可以获得画布元素的宽度和高度。例如：
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();context是您从画布中获得的对象，允许您在其中进行绘制。您可以将context视为画布的API，它为您提供了用于在画布元素上进行绘制的命令。
Stack Overflow用户
发布于 2012-12-14 20:10:20
好吧，之前的所有答案都不完全正确。2的主流浏览器不支持这两个属性(IE就是其中之一)，或者以不同的方式使用它们。
更好的解决方案(大多数浏览器都支持，但我没有选中Safari)：
var canvas = document.getElementById('mycanvas');
var width = canvas.scrollWidth;
var height = canvas.scrollHeight;至少我用scrollWidth和-Height得到了正确的值，并且在调整大小时必须设置canvas.width和height。
Stack Overflow用户
发布于 2015-07-03 06:25:22
提到canvas.width的答案返回画布的内部尺寸，即在创建元素时指定的尺寸：
<canvas width="500" height="200">如果使用CSS调整画布的大小，则可以通过.scrollWidth和.scrollHeight访问其DOM维度
var canvasElem = document.querySelector('canvas');
document.querySelector('#dom-dims').innerHTML = 'Canvas DOM element width x height: ' +
canvasElem.scrollWidth +
' x ' +
canvasElem.scrollHeight
var canvasContext = canvasElem.getContext('2d');
document.querySelector('#internal-dims').innerHTML = 'Canvas internal width x height: ' +
canvasContext.canvas.width +
' x ' +
canvasContext.canvas.height;
canvasContext.fillStyle = "#00A";
canvasContext.fillText("Distorted", 0, 10);<p id="dom-dims"></p>
<p id="internal-dims"></p>
<canvas style="width: 100%; height: 123px; border: 1px dashed black">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4032179
复制相关文章
相似问题
腾讯云开发者
