HTML画布-太多矩形中断页面

Question

当我尝试使用以下方法在画布上绘制大量（+5000）矩形时，页面破裂（chrome oops页面）

矩形 ：

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会导致我的页面崩溃？

Answer 1

我正在发布我的评论作为答案，因为它似乎已证明是一种解决方案：

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

这是画布的2D渲染上下文上的MDN文档。 请注意， .rect()创建一个新路径，而.stroke抚摸每个路径 ：

CanvasRenderingContext2D.stroke（） ：以当前笔触样式笔触子路径。

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