2

html キャンバス関数を使用して作成した形状 (四分円) があります。

  • moveTo
  • LineTo
  • QuadraticCurveTo

形状をパーティクルに爆発させてから、それらを元に戻して円を形成するにはどうすればよいですか?

4

1 に答える 1

1

しばらく時間がかかるので、コードを書くつもりはありません。ウェブ上で例を見つけることができると確信していますが、そのようなことを行うために知っておく必要がある理論を説明します. .

  1. document.createElement('canvas')ページに表示されないインメモリ キャンバスを ( を使用して) 作成します。このキャンバスは、少なくともオブジェクトと同じ大きさである必要があります。オブジェクトとまったく同じ大きさであると仮定します。これを呼び出すtempCanvasと、tempCtx
  2. オブジェクトを tempCtx に描画します。
  3. あなたが正確に言及しなかったいくつかのイベントがあるでしょうが、私はあなたが心に留めていると確信しています. ボタンを押すかオブジェクトをクリックすると、「爆発」します。何かを選択するために、クリックで爆発させたいと思います。

爆発を行うには：

  1. オブジェクトを通常のコンテキストに描画します:ctx.drawImage(tempCanvas, x, y)ユーザーに何かが見えるようにします
  2. tempCanvas 内の各ピクセルの位置に対応するピクセルの配列が必要になるでしょう。したがって、tempCanvas が 20x30 の場合、[20][30]対応する の配列が必要になります。
  3. これらのピクセルごとにデータを保持する必要があります。具体的には、ピクセル [2][4] の開始点が (2,4) であるため、開始点は簡単です。また、最初は開始点と同じですが、フレームごとに変化する現在の場所もあります。
  4. 爆発イベントが発生すると、元のマウスの x と y の位置を追跡します。
  5. この時点で、すべてのピクセルに対してベクトルがあり、方向があることを意味します。オブジェクトの中央をクリックした場合、(10,15) のマウス座標を保存する必要があります (注 1 を参照)。これで、爆発するイメージのすべてのピクセルに軌跡があります。ここには私が当然と思っている数学が少しありますが、SO またはインターネットで別のトピックを検索すると、これらの線の勾配などを見つけてそれらを継続する方法がわかります。
  6. 以降のすべてのフレームでは、各ピクセル[x][y]を取得して使用する必要がありますctx.drawImage(tempCanvas, x, y, 1, 1, newX, newY, 1, 1)。ここで、x と y はピクセルと同じで[x][y]あり、newX と newY はベクトルを使用して計算され、その線に沿って次の点が何であるかを見つけます。

その結果、画像の各ピクセルが元のクリック ポイントから少し離れた場所に描画されます。フレームごとにこの作業を続けると、オブジェクトが爆発したように見えます。

とにかく、それは一般的な考えです。不明な点があればお知らせください。

注 1: ほとんどの場合、通常のキャンバスは爆発するオブジェクトと同じサイズにはなりません。オブジェクトが 100,100 に配置されているため、実際には 10,15 ではなく 110, 115 をクリックした可能性があります。簡単にするために、そのオフセットを省略しています。

于 2012-01-13T19:30:11.180 に答える