0

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

提前感谢您的任何建议/意见

4

1 回答 1

1

路径可以按你喜欢的次数被抚摸，当你调用它们时它们不会被清除.stroke()，所以：

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

编辑自己试过这个 - 它没有工作 - 路径的第二个副本没有注意到坐标空间的翻译:(

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

于 2012-10-24T12:13:18.950 回答