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画布性能最佳实践/优化。

提前感谢任何建议/意见

Answer 1

可以根据需要多次触发路径，当您拨打.stroke()时，路径不会被清除，所以：

创建路径（如上所述）
.stroke()它
翻译上下文
更改颜色
.stroke()再次

编辑我自己尝试过 - 它不起作用 - 路径的第二个副本没有注意到坐标空间的转换：（

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

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

1 个答案: