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

82

这可能是值得考虑的一个教程：Firefox Canvas Tutorial

您可以通过访问该元素的那些属性得到了canvas元素的宽度和高度。例如：

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

上下文是您从画布中获取的对象，以便您可以将其绘制到该对象中。

来源

2010-10-27 10:26:20 andrewmu

+0

请注意，不幸的是，Mozilla教程现在基本上是一堆断开的链接。希望他们有一天能解决它。 – 2013-06-18 12:05:47

+1

这将返回Chrome 31中的上下文画布大小。 – shuji 2013-12-03 04:09:40

+5

只有当width和height被直接指定为

17

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

如果你想获得的宽度和高度，你可以使用标准的HTML属性width和height：

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

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

来源

2010-10-27 10:29:16 Harmen

+3

这个回答与@ andrewmu's非常相似，并且如果您的大小通过CSS的画布。看到[我的答案]（http://stackoverflow.com/questions/4032179/how-do-i-get-the-width-and-height-of-a-html5-canvas/31195651#31195651）为更强大解。 – 2015-07-02 22:26:45

28

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

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

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

至少我得到scrollWidth和 - 高度正确的价值观和必须设置canvas.width和高度时，它是调整大小。

来源

2012-12-14 12:10:19 Bitterblue

+0

IE9的确支持canvas.width和height（好的，9之前的版本根本不支持canvas），我刚刚给它一下。你遇到了什么麻烦？另一个主要的浏览器是哪一个？ – thomanski 2012-12-30 00:11:19

+1

对，我真的永远不会更新IE，因为我不使用它。另一个主要的浏览器是Opera在调整大小时没有/没有更新宽度和高度。 – Bitterblue 2013-01-03 10:17:50

+2

canvas.width/height在firefox中不起作用 – schwiz 2013-02-14 18:30:43

7

现在开始2015年，所有（主要？）浏览器似乎alow c.width和c.height得到画布内部大小，但：

的答案missleading的问题，因为帆布已原则上2不同/独立的尺寸。

的“HTML”可以说，CSS宽度/高度和它自己的（属性 - ）宽度/高度

看看这个short example of different sizing，在这里我把200/200帆布为300/100 HTML元素

大多数例子（我看到的都是）没有css大小的设置，所以它会得到（绘图）大小的宽度和高度。但是这不是必须的，并且如果你采取了错误的尺寸 - 即可以产生有趣的结果。 css widht /内部定位的高度。

来源

2015-02-02 16:50:55 halfbit

14

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

来源

2015-07-02 22:25:21

+0

这是正确的答案。 2个维度要考虑。 – Nadir 2016-01-17 02:39:40

+2

这应该是选定的答案。如果您不指定任何值并使用相对大小调整（使用引导程序...等），直接调用'width'和'height'将始终返回300x150。谢谢。 – mcy 2016-02-05 09:30:04

-1

我，因为有一个问题我的画布是在一个没有ID的容器里面，所以我用下面的这个jQuery代码

$('.cropArea canvas').width()

来源

2017-07-25 16:45:05

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

回答

相关问题