Javascript HTML画布-太多矩形会破坏页面

当我尝试使用以下工具在画布上绘制大量（+5000）矩形时，我的页面会中断（chrome oops页面）：

矩形：

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

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

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();

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




圆圈：

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

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

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();

X：

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

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

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();

三角形：

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

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

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

会导致我的页面崩溃？

我将我的评论作为一个答案，因为它似乎已经证明是一个解决方案：

请注意，您的圆和三角形示例是如何以

beginPath

开头的，而您的rect示例则不是

请注意，

.rect（）

创建一个新路径，而

.stroke

对每个路径进行笔划：

CanvasRenderingContext2D.stroke（）：使用当前笔划样式笔划子路径

---

在您的示例中，您为每个新矩形创建了一个新路径，并在每个新矩形之后发出一个新的笔划命令，这意味着您的

stroke

命令在每次迭代中都有越来越多的子路径进行笔划，从而影响了性能。

您是否也为每个矩形创建了一个新路径？与每次使用beginPath的情况不同，其他笔划将有越来越多的路径需要覆盖。你能制作一把小提琴来演示吗？@doldt good eye！果然，我忘了在那块代码中添加一个

beginPath（）

，谢谢！作为答案，我很乐意接受！