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

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>

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

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