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

Question

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

另外,我一直在阅读的画布的"背景"是什么？

Answer 1

可能值得一看教程:Firefox Canvas Tutorial

只需访问元素的这些属性,即可获得canvas元素的宽度和高度.例如:

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

上下文是从画布中获取的对象,允许您绘制它.

Answer 2

那么,之前的所有答案都不完全正确.2个主流浏览器不支持这2个属性(IE是其中之一)或以不同方式使用它们.

更好的解决方案(大多数浏览器支持,但我没有检查Safari):

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

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

Answer 3

提到的答案canvas.width返回画布的内部尺寸,即创建元素时指定的尺寸:

<canvas width="500" height="200">

如果大小与CSS画布,它的DOM尺寸是通过访问.scrollWidth和.scrollHeight:

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">

Answer 4

上下文对象允许您操作画布; 你可以绘制矩形例如以及更多.

如果要获得宽度和高度,可以使用标准HTML属性,width并且height:

var canvas = document.getElementById( 'yourCanvasID' );
var ctx = canvas.getContext( '2d' );

alert( canvas.width );
alert( canvas.height ); 

Answer 5

现在开始2015所有(主要的？)浏览器似乎都是如此,c.width并c.height获得画布内部大小,但是:

因为画布原则上有2种不同/独立的尺寸,因此答案是错误的.

"html"可以说CSS宽度/高度和它自己的(属性 - )宽度/高度

看看这个不同大小的简短示例,我将200/200画布放入300/100 html元素中

大多数例子(我看到的都没有)没有css-size集,所以theese得到了(绘图)画布大小的宽度和高度.但这不是必须的,并且如果你采取错误的尺寸可以产生有趣的结果 - 即.css widht/height用于内部定位.