Question

我用 HTML5 来绘制线条。但是当画布的宽度和高度大时, 它在铬中不能正常工作。

我用的是染色体 19.0.1084.52 我的屁股是7号窗

是否有人使用“http://www.w3schools.com/html5/tryit.asp? filename=tryhtml5_canvas_line” rel=“no follow” >http://www.w3schololks.com/html5/tryit.asp? filename=tryhtml5_canvas_line 进行测试?

如果你增加帆布的宽度和高度,线就会消失。

在铬中,是否有最大高度和宽度的帆布? 是否有人有解决办法?

Answer 1

这是一个有趣的问题!

在用我的铬和火狐测试后,我发现:

Chrome draws nothing if canvas width > 32767
Firefox draws nothing if canvas width > 32766

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

I don t know why there is such a limitation. Maybe we can find out the root cause by the browser s source code!

以下的代码是一个示例。您可以在此点击 < a href=" http://jsfiddle.net/4c75a/13/" rel=" nofollow" 来运行。

<!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://jsfidle.net/AkashSaikia/4c75a/"rel="no follow" >http://jsfidle.net/AkashSaikia/4c75a/

玩过大,玩过大

And as per w3c here its like this with unsigned long that is about 0 to 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://jsfidle.net/AkashSaikia/9EWad/1/。

你何时或如何改变卡纳瓦人的高度和宽度?

FIY,如果你改变画布的高度和宽度属性, 它就会清除上面画的东西。

Answer 3

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

如果您想要绘制宽线, 请绘制矩形, 将其转换为正确位置, 并旋转到线形角。

Answer 4

根据我的经验,画布的尺寸有限制,至少对于iOS设备是这样。这是因为GPU内存有限,因为现在的画布通常是硬件加速。

对于iOS设备而言,最大尺寸为5兆像素,对于具有256+MB内存的设备,最大尺寸为5兆像素,对于内存较少的设备,最大尺寸为3兆像素。

友情链接