Question

我正在使用HTML5绘制一条线。但是当画布的宽度和高度很大时，它在chrome中无法正常工作。

我使用的是Chrome 19.0.1084.52，我的操作系统是Windows 7。

是否有人使用http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_line进行测试？

如果增加画布的宽度和高度，该行将消失。

chrome中是否有任何最大高度和宽度的画布，是否有人有解决方案？

Answer 1

这是一个有趣的问题！

使用我的Chrome和Firefox测试后，我发现：

Chrome 则不会显示任何内容的 32767

如果画布宽度＆gt;
Firefox 不绘制任何内容的 32766

如果您的画布宽度大于该数字，则不会绘制任何内容。

我不知道为什么会有这样的限制。也许我们可以通过浏览器的源代码找出根本原因！

以下代码就是一个例子。你可以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>

Answer 2

可能存在宽度和高度限制，但我觉得这已经足够了，

这里是http://jsfiddle.net/AkashSaikia/4c75a/

玩过大号

按照w3c这里它与无符号长度相似，约为0到4,294,967,295

interface HTMLCanvasElement : HTMLElement {
           attribute unsigned long width;
           attribute unsigned long height;

  DOMString toDataURL(optional DOMString type, any... args);
  void toBlob(FileCallback? _callback, optional DOMString type, any... args);

  object? getContext(DOMString contextId, any... args);
};

但是一旦测试需要大约0到2147483647

见http://jsfiddle.net/AkashSaikia/9EWad/1/

何时或如何改变Canavas的高度和宽度？

FIY，如果你改变画布的高度和宽度属性，那么它将清除画在它上面的东西。

Answer 3

该行的最大宽度和高度可能取决于所使用的浏览器。

如果要绘制非常宽的线条，则绘制一个矩形并将其转换为正确的位置并将其旋转到线条角度。

Answer 4

根据我的经验，画布渲染存在大小限制，至少对于iOS设备而言。这是由于GPU内存有限，因为现在画布通常是硬件加速的。

对于iOS设备，对于具有256 + MB内存的设备，最大大小为5兆像素，对于具有较少内存的设备，最大大小为3兆像素。

我似乎无法在html5画布上画一条线

4 个答案: