HTML Canvas - 太多矩形打破页面答案

【问题标题】：HTML Canvas - too many rectangles break pageHTML Canvas - 太多矩形打破页面
【发布时间】：2015-10-06 21:41:46
【问题描述】：

当我尝试使用以下方法在画布上绘制大量 (+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 会导致我的页面崩溃，而其他绘图函数都没有任何问题？

【问题讨论】：

您是否也在为每个矩形开始一条新路径？否则笔画会覆盖越来越多的路径，这与您每次都使用 beginPath 的情况不同。
你能创建一个小提琴来演示吗？
@doldt 好眼力！果然我忘了在代码块中添加beginPath()，谢谢！发布为答案，我很乐意接受！

标签： javascript html canvas drawing

【解决方案1】：

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

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

Here's the MDN docs on canvas' 2D rendering context. 请注意，.rect() 会创建一个新路径，而.stroke 会描边每条路径：

CanvasRenderingContext2D.stroke()：用当前的笔触样式来笔触子路径。

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

【讨论】：