直播演示

尝试添加 beginPath 方法，如下面的代码：

Try add the beginPath method, like the following code:

canvasContext.beginPath();
canvasContext.rect(2, 1, 210, 30);
canvasContext.rect(2, 1, 80, 30);
canvasContext.rect(80, 1, 70, 30);
canvasContext.strokeStyle = "#FCEB77";
canvasContext.stroke();
canvasContext.closePath();

使用路径绘图时，您使用的是虚拟笔或指针。没有路径，将导致画布状态机上的直接更改，这会使事情变得缓慢。

When drawing using a path, you are using a virtual "pen" or "pointer". Without the path, will cause direct changes on canvas state machine which make things slow.

closePath 不是必需的在这种情况下，但有说明用法。

closePath is not really necessary in this case, but is there to illustrate the usage.

尝试演示有和没有（开始/关闭）路径并比较性能。我提供了一个粗略的fps计数器，但它足以看到性能下降。

Try demo with and without the (begin/close)Path and compare the performance. I provided a rough fps counter but it is sufficient to see the decrease in performance.

你可能需要在其他浏览器上检查这个，包括手机，所以我设置了这个 JSPerf测试。

You might need to check this on other browsers, including mobiles, so I set this JSPerf test.