花火アニメーション
約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(); } }