0

html5キャンバスでページめくり効果をシミュレートしています。

各ページで、罫線入り用紙をシミュレートするために線を描いています。

これらの線は、ページをめくるときに描画されます。自然な視点を与えるために、いくつかの要因（ページめくりの進行状況、ページの中心への近さなど）に基づく2次曲線を使用して線を描画しています。

効果は非常に自然で見栄えがしますが、これを最適化する方法を探しています。

現在、すべての線を2回描画しています。1回は実際の線用で、もう1回はこの線の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();

ご覧のとおり、パスを開いて各線をループし、パスを描画しています。次に、「ハイライト」行に対してプロセス全体を繰り返します。

ループ内に各線を個別に描画せずに、これらの操作の両方を1つのループに結合する方法はありますか？これは実際にははるかに高価です。

これはマイクロ最適化です、私はこれをよく知っています。ただし、このプロジェクトは、html5キャンバスパフォーマンスのベストプラクティス/最適化を学ぶための個人的な演習です。

提案/コメントを事前に感謝します

4

1 に答える 1

1

パスは何度でもストロークできます。呼び出したときにパスはクリアされないため、次のようになります.stroke()。

  1. パスを作成します（上記のように）
  2. .stroke()それ
  3. コンテキストを翻訳する
  4. 色を変える
  5. .stroke()もう一度

EDITはこれを自分で試しました-それは機能しませんでした-パスの2番目のコピーは座標空間の変換に気づきませんでした:(

「現在のデフォルトパス」の代わりに（ドラフト）仕様に記載されているようにパスが作成された場合は明らかにnew Path()機能しますが、Chromeではまだサポートされていないようです。

于 2012-10-24T12:13:18.950 に答える