如何獲取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

上下文對象允許您操作畫布;你可以繪製矩形例如更多。

如果你想獲得的寬度和高度，你可以使用標準的HTML屬性width和height：

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

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

Answer 3

嘛，是不完全正確的所有問題的答案之前。主要瀏覽器中的2個不支持這兩個屬性（IE是其中之一），或者以不同的方式使用它們。

更好的解決方案（大多數瀏覽器都支持，但我沒有檢查Safari瀏覽器）：

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

至少我得到scrollWidth和 - 高度正確的價值觀和必須設置canvas.width和高度時，它是調整大小。

Answer 4

現在開始2015年，所有（主要？）瀏覽器似乎alow c.width和c.height得到畫布內部大小，但：

的答案missleading的問題，因爲帆布已原則上2不同/獨立的尺寸。

的「HTML」可以說，CSS寬度/高度和它自己的（屬性 - ）寬度/高度

看看這個short example of different sizing，在這裏我把200/200帆布爲300/100 HTML元素

大多數例子（我看到的都是）沒有css大小的設置，所以它會得到（繪圖）大小的寬度和高度。但是這不是必須的，並且如果你採取了錯誤的尺寸 - 即可以產生有趣的結果。 css widht /內部定位的高度。

Answer 5

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

我，因爲有一個問題我的畫布是在一個沒有ID的容器裏面，所以我用下面的這個jQuery代碼

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