1

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

我使用的是 chrome 19.0.1084.52，我的操作系统是 windows 7。

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

如果增加画布的宽度和高度，线条就会消失。

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

4

4 回答 4

2

这是一个有趣的问题！

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

  • 如果画布宽度 > 32767 ， Chrome不绘制任何内容
  • 如果画布宽度 > 32766 ， Firefox不绘制任何内容

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

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

以下代码是一个示例。您可以单击此处运行它。

<!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>
于 2012-09-21T17:48:39.067 回答
1

可能有宽度和高度的限制，但我觉得足够了，

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

它玩过大尺寸

根据 w3c，这里的 unsigned long 大约是 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，如果你改变画布的高度和宽度属性，那么它会清除画在上面的东西。

于 2012-05-24T09:56:03.073 回答
0

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

如果你想画很宽的线，那么你画一个矩形，把它变换到正确的位置，然后旋转到线的角度。

于 2012-05-24T06:29:07.803 回答
0

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

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

于 2013-12-16T06:21:26.227 回答