0

キュービックベジェ曲線を使用して作成された直線で草のような曲がりを実現しようとしています.ベジェ曲線を使用して直線を作成しましたが、上から曲げたいと思っています.しかし、私が直面している問題は、動的に実行します。マウスムーブを使用して曲げを作成すると、一連の曲線が表示され、キャンバスにペイントのような外観が表示されますが、これは望ましくありません。単一の曲線が必要なだけです。私の質問は、前の線をどのようにクリアするかです描画され、最新の曲げ曲線を復元しますか?? 私のコード:見たい場合は、ここに私のコードがあります

4

2 に答える 2

2

互いの上に積み重ねられた2 つのキャンバスを作成します。

最初のものは静的コンテンツを含み、もう 1 つは動的コンテンツのみを含みます。

この方法では、草が描画された領域をクリアすることだけを気にする必要があります (また、常に静的を​​再描画する必要がないため、これもはるかに高速です)。

位置が相対に設定されている div 内に 2 つのキャンバスを配置し、絶対に設定された位置を使用してキャンバスを配置します。

これで、静的コンテンツを描画する関数を作成できます (ブラウザー ウィンドウのサイズが変更された場合などに再描画する必要があります)。

草が描かれている領域を記録し、次のフレームで (草ごとに) これだけをクリアします。

これが複雑すぎる場合は、「動的」キャンバスで単純なクリアを使用してください。

ctxDyn.clear(0, 0, canvasDyn.width, canvasDyn.height);

これにより、このキャンバスの透明度、または必要に応じて「レイヤー」も保持されます。

requestAnimationFrameを使用して、実際のアニメーションを実行します。

var isPlaying = true;

function animate() {

    ctxDyn.clear(0, 0, canvasDyn.width, canvasDyn.height);

    drawGrass(); //function to draw the actual grass

    if (isPlaying) requestAnimationFrame(animate);
}

animate(); // start

はisPlaying、アニメーションを停止できるように、画面上のボタンなどで切り替えることができるフラグです。requestAnimationFrameこれはまだ「若い」実装であるため、このクロスブラウザーを作成する方法については、リンクを参照してください。

dynCtxもちろん、あなたが望むものとdynCanvas呼ぶことができます。

于 2013-05-27T21:00:54.290 に答える
0

更新された「草」を再描画する前に、キャンバスの現在の内容を消去する必要があります。これには、キャンバス上で「静的」な他のすべてのものを再描画する必要があります。例えば：

function redraw() {
  // Erase the current contents
  ctx.fillStyle = 'white';
  ctx.fill(0, 0, canvas.width, canvas.height);

  // Draw the stuff that does not change from frame to frame
  drawStaticContent();

  // Draw the dynamic content
  drawGrass();
}

イベントで、草のカーブ情報を更新してmousemoveから「再描画」します。

于 2013-05-27T14:49:27.747 に答える