HTML Canvas - 矩形太多导致页面中断

Question

当我尝试在 canvas 上使用以下方法绘制大量 (+5000) 个矩形时，我的页面中断（chrome 哎呀页面）：

矩形:

ctx.rect(x,y,options.missSize,options.missSize);
ctx.stroke();

但是，如果我使用以下任何方法绘制相同数量的圆圈、三角形或 X，我的页面不会中断：

圈:

ctx.beginPath();
ctx.arc(x,y,options.missSize/2,0,2*Math.PI);
ctx.stroke();

X:

ctx.beginPath();
ctx.moveTo(x - options.missSize/2, y - options.missSize/2);
ctx.lineTo(x + options.missSize/2, y + options.missSize/2);
ctx.stroke();
ctx.moveTo(x + options.missSize/2, y - options.missSize/2);
ctx.lineTo(x - options.missSize/2, y + options.missSize/2);
ctx.stroke();

三角形:

ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x+(options.missSize/2), y+options.missSize);
ctx.lineTo(x-(options.missSize/2), y+options.missSize);
ctx.lineTo(x, y);
ctx.stroke();

为什么 rect 导致我的页面崩溃，而 none 的其他绘制函数有任何问题？

Answer 1

我将发表我的评论作为答案，因为它似乎证明了一个解决方案：

请注意您的圆形和三角形示例如何以 beginPath 开头，而您的矩形示例不是！

Here's the MDN docs on canvas' 2D rendering context. 注意 .rect() 创建一条新路径，而 .stroke 笔划 每条路径 :

CanvasRenderingContext2D.stroke(): Strokes the subpaths with the current stroke style.

在您的示例中，您一直在为每个新矩形创建一个新路径，并在每个矩形之后发出一个新的描边命令，这意味着您的 stroke 命令在每次迭代中都有越来越多的子路径来描边，因此性能下降。

HTML Canvas - 矩形太多导致页面中断

HTML Canvas - too many rectangles break page

html

javascript

drawing

canvas