有没有办法让这些“画布”线在一个循环中绘制？

Question

我在html5画布中模拟翻页效果。

我在每一页上画线来模拟横格纸。

这些线是在翻页时绘制的，为了提供自然的视角，我使用基于多个因素（翻页进度、靠近页面中心等...等...）的二次曲线绘制它们

效果非常自然，看起来很棒，但我正在寻找优化它的方法。

目前我将每条线绘制两次，一次用于实际线，一次用于该线下方 1px 的微小突出显示。我这样做是这样的：

// render lines (shadows)

          self.context.lineWidth = 0.35;

          var midpage = (self.PAGE_HEIGHT)/2;

          self.context.strokeStyle = 'rgba(0,0,0,1)';
          self.context.beginPath();

          for(i=3; i < 21; i++){
             var lineX = (self.PAGE_HEIGHT/22)*i;
             var curveX = (midpage - lineX) / (self.PAGE_HEIGHT);
             self.context.moveTo(foldX, lineX);                                       
             self.context.quadraticCurveTo(foldX, lineX + ((-verticalOutdent*4) * curveX), foldX - foldWidth - Math.abs(offset.x), lineX + ((-verticalOutdent*2) * curveX));

          }
          self.context.stroke();

 // render lines (highlights)
         self.context.strokeStyle = 'rgba(255,255,255,0.5)';
         self.context.beginPath();

         for(i=3; i < 21; i++){
              var lineX = (self.PAGE_HEIGHT/22)*i;
              var curveX = (midpage - lineX) / (self.PAGE_HEIGHT);
              self.context.moveTo(foldX, lineX+2);                                       
              self.context.quadraticCurveTo(foldX, lineX + ((-verticalOutdent*4) * curveX) + 1, foldX - foldWidth - Math.abs(offset.x), lineX + ((-verticalOutdent*2) * curveX) + 1);                                          
         }
         self.context.stroke();

如您所见，我正在打开一条路径，遍历每一行，然后绘制路径。然后我对“突出显示”行重复整个过程。

有没有办法将这两个操作组合成一个循环而不在循环中单独绘制每一行，这实际上会更昂贵？

这是一个微优化，我很清楚这一点。然而，这个项目对我来说是一个个人练习，目的是学习 html5 画布性能最佳实践/优化。

提前感谢您的任何建议/cmets

Answer 1

路径可以随意多次，调用.stroke()时它们不会被清除，所以：

1. 创建您的路径（如上）
2. .stroke()它
3. 翻译上下文
4. 改变颜色
5. .stroke()又来了

EDIT 我自己试过了 - 没用 - 路径的第二个副本没有注意到坐标空间的平移 :(

如果路径是使用（草案）规范中记录的new Path()而不是“当前默认路径”创建的，那么显然会工作，但Chrome似乎不支持还没有。