我似乎无法在html5画布上画线 [英] I can't seem to draw a line on html5 canvas
问题描述
我使用HTML5绘制线条。但是，当画布的宽度和高度很大时，它无法在Chrome中正常工作。
我使用chrome 19.0.1084.52，而我的os是windows 7。 p>
有没有人使用 http：/ /www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_line 进行测试？
如果您增加画布的宽度和高度，则线条消失。
在chrome中是否有任何最大高度和宽度的canvas，并且没有人有解决方案？
这是一个有趣的问题！
经过我的Chrome和Firefox测试后，我发现：
- Chrome 如果画布宽度> 32767 ，则不会绘制任何内容如果画布宽度> 32766 ，那么Firefox 不会绘制任何内容如果您的画布宽度更大比这个数字，什么都不会被绘制。
我不知道为什么会有这样的限制。
也许我们可以通过浏览器的源代码找出根本原因！
以下代码是一个示例。您可以点击此处运行。
<！DOCTYPE html>
< html>
< body>
如果画布宽度大于32767，则Chrome无法绘制任何内容。< br>
< canvas id =myCanvaswidth =32768height =100>< / canvas>
< script type =text / javascript>
var c = document.getElementById（myCanvas）;
var ctx = c.getContext（2d）;
ctx.lineWidth = 5;
ctx.moveTo（10,50）;
ctx.lineTo（300,50）;
ctx.stroke（）;
< / script>
< / body>
< / html>
I am using HTML5 for drawing a line. But it is not working properly in chrome when the width and height of the canvas is large.
I am using chrome 19.0.1084.52 and my os is windows 7.
Has anyone used http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_line for testing?
If you increase the width and height of the canvas the line disappears.
Is there any maximum height and width for canvas in chrome and does anyone have a solution?
解决方案It's an interesting issue!
After testing with my Chrome and Firefox, I find that:
- Chrome draws nothing if canvas width > 32767
- Firefox draws nothing if canvas width > 32766
If your canvas width is greater than that number, nothing will be drawn.
I don't know why there is such a limitation. Maybe we can find out the root cause by the browser's source code!
The following code is an example. You can click here to run it.
<!DOCTYPE html> <html> <body> If canvas width is greater than 32767, Chrome can't draw anything.<br> <canvas id="myCanvas" width="32768" height="100"></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.lineWidth = 5; ctx.moveTo(10,50); ctx.lineTo(300,50); ctx.stroke(); </script> </body> </html>这篇关于我似乎无法在html5画布上画线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
