有什麼辦法可以在一個循環中繪製這些「畫布」線條？

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 canvas性能最佳實踐/優化，這個項目對我來說是個人練習。

在此先感謝您的任何建議/評論

Answer 1

路徑，只要你喜歡，當你調用.stroke()，所以他們不會被清除，可以撫摸多次：

1. 創建路徑（如上文）
2. .stroke()它
3. 翻譯上下文
4. 變化的顏色
5. .stroke()再次

編輯這種嘗試自己 - 它沒有工作 - 路徑的第二個副本沒有注意到的座標空間:(

它顯然會的翻譯如果路徑是使用（草稿）規範中記錄的new Path()創建的，而不是「當前默認路徑」，但在Chrome中似乎尚不支持該路徑。