花火アニメーション

約1時間で作成してみました。変数の名前などは大目に見てください。楽しいのでどんどん機能拡張します。

var MATH_CIRCLE = Math.PI * 2;

var _interval = 100;
var _x = 500;
var _y = 500;
var _radius = 10;
var _count = 0;
var _ctx;
var _timer;

window.onload = function(){
  var id = document.getElementById("mycanvas");
  _ctx = id.getContext("2d");
  draw();
};

function drawCircle(x,y){
  _ctx.clearRect(0,0,1000,500);
  _ctx.beginPath();
  _ctx.fillStyle = "red";
  _ctx.arc(x, y, 10, 0, MATH_CIRCLE, false);
  _ctx.fill();
}

function drawExplosion(){
  _ctx.clearRect(0,0,1000,500);
  _ctx.beginPath();
  _ctx.fillStyle = "red";
  for(i=0;i<8;i=i+1){
    _ctx.arc(500 + (Math.sin(MATH_CIRCLE * (1/8)*i) * _count*10), 200 + (Math.cos(MATH_CIRCLE *(1/8)* i) * _count*10), 10, 0, MATH_CIRCLE, false);
  }
  _ctx.fill();

}

function draw(){
  drawCircle(_x, _y-(10*_count));
  _count = _count + 1;
  _timer = setTimeout(draw, _interval);
  if(_count == 30){
    _count = 0;
    clearInterval(_timer);
    explosion();
  }
}

function explosion(){
  drawExplosion();
  _count = _count + 1;
  _timer = setTimeout(explosion, _interval);
  if(_count == 30){
    _count = 0;
    clearInterval(_timer);
    draw();
  }
}