把canvas搞大了,出有关问题了

把canvas搞大了,出问题了

看第一段代码,这是能正常工作的,画出一条黑线:

<canvas id="myCanvas" width="32766" height="100"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth = 5;
ctx.moveTo(10,50);
ctx.lineTo(300,50);
ctx.stroke();
</script>

和第一段的差别仅仅在于canvas的宽度不同了,但是画不出任何东西:

<canvas id="myCanvas" width="32768" height="100"></canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth = 5;
ctx.moveTo(10,50);
ctx.lineTo(300,50);
ctx.stroke();
</script>

在我本人机子上测试,Firefox浏览器canvas的极限尺寸是32766,Chrome浏览器canvas的极限尺寸是32767,大于这个尺寸,绘图命令将失效。

原因不明。

如果特殊情况下需要超大canvas,那就用2个以上的canvas来拼吧!