火の玉の発射などの炎の効果を実装するための HTML5 Canvas のサンプル コード

Canvas は、HTML5 では非常に重要で便利なもので、Flash を作成するのと同じように、Canvas 上に任意の要素を描画できます。今回はCanvas上に炎の発光エフェクトを作成していきます。これは古代の火の玉大砲のようなもので、ブラウザの端で跳ね返ることができ、非常にクールに感じられます。レンダリングを見てみましょう:

ここで火球のデモデモを見ることができます

もちろん、ソースコード、主にいくつかの JS コードを分析する必要があります。

まず、ページに Canvas タグを配置し、簡単なスタイルを与えます:

<canvas></canvas>

canvas{
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  cursor: crosshair;
}

それから、JS コードを分析しましょう。 JS を段階的に分解してみましょう。

これは 2 次元の アニメーション であるため、canvas の getContext メソッドを使用して オブジェクト を返します。このオブジェクトには 2 次元のアニメーション操作用の API が含まれています。コードは次のとおりです。以下の粒子を定義しましょう:

canvas = document.querySelector('canvas');
ctx = canvas.getContext('2d');

次に、火の玉を定義しましょう:

particles = {};
newParticle = (function(){  var nextIndex = 0;  return function(x,y,r,o,c,xv,yv,rv,ov){
    particles[++nextIndex] = {
      index: nextIndex,
      x: x,
      y: y,
      r: r,
      o: o,
      c: c,
      xv: xv,
      yv: yv,
      rv: rv,
      ov: ov
    };
  };
})();

ここで、ライフは火の玉の

ライフサイクル

を表します。以下では、ライフの値が火の玉の強度の変化に応じて変化することがわかります。打ち上げ。 次のステップは、スリングショットをドラッグするマウスを定義し、火の玉を発射する準備をすることです:

fireballs = {};
newFireball = (function(){  var nextIndex = 0;  return function(x,y,xv,yv,life){
    fireballs[++nextIndex] = {
      index: nextIndex,
      x: x,
      y: y,
      xv: xv,
      yv: yv,
      life: life
    };
  };
})();

マウスボタンが跳ね上がると、新しい火の玉が作成され、ライフ値が初期化されることがわかります。

以下は、ブラウザの端に当たったときの反射効果を含む、火の玉が移動するときのアニメーション実行コードです:

mouse = {x:0,y:0,d:0};
onmousemove = function(e){
  mouse.x = e.clientX-o.x;
  mouse.y = e.clientY-o.y;  var dx = mouse.x - pos1.x,
      dy = mouse.y - pos1.y;
  mouse.d = Math.sqrt(dx*dx+dy*dy);
};

charging = false;
pos1 = {x:0,y:0};
showInstructions = true;
onmousedown = function(e){
  pos1.x = mouse.x;
  pos1.y = mouse.y;
  charging = true;
  showInstructions = false;
};

onmouseup = function(){  if(charging){
    newFireball(
      mouse.x,
      mouse.y,
      (pos1.x-mouse.x)*0.03,
      (pos1.y-mouse.y)*0.03,      600
    );
    charging = false;
  }
};

以上が火の玉の発射などの炎の効果を実装するための HTML5 Canvas のサンプル コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。