javascript - 无法设置画布元素的大小？

Question

我正在尝试绘制一个<canvas>500 x 1000 像素的元素，但我的浏览器只会渲染 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>

如果您需要动态设置这些属性，请在之前分配width和height属性getContext()：

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

Answer 2

您需要设置新创建的画布的宽度和高度

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