看第一段代码,这是能正常工作的,画出一条黑线:
<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来拼吧!