無法設置畫布元素的大小？

Question

我正在嘗試繪制500 x 1000像素的<canvas>元素，但是我的瀏覽器將僅渲染300 x 150像素的元素。

這是我的代碼：

var c=document.getElementById('canvas');
var ctx=c.getContext('2d');
ctx.fillStyle='black';  
ctx.fillRect(0,0,500,1000);

JSFiddle在這里： http : //jsfiddle.net/R8cxH/

我不明白這一點，因為外部body元素的寬度大於300像素。

我究竟做錯了什么？

Answer 1

使用HTML屬性：

<canvas id="canvas" width="500" height="1000"></canvas>

如果需要動態設置這些屬性，請在getContext()之前分配width和height屬性：

var c = document.getElementById('canvas');
c.width = 500;
c.height = 1000;
var ctx = c.getContext('2d');

Answer 2

您需要設置新創建的畫布的寬度和高度

c.width = 500;
c.height = 1000;