【canvas】画像を回転させながら落とす
最近、インタラクティブな実装に興味を持ち始めました。
覚え書きとして、canvasで画像を用いて回転させながら落ちるアニメーションの実装方法を記しておきます。
DEMO
補足
- 画像を複数個使用することを想定して、配列を用いています。
JavaScriptコード
$(function(){ var canvas = document.getElementById ('canvas'); var ctx = canvas.getContext ('2d'); function canvasbg(pageY,pageX,flag){ var counter1 = 0; var counter2 = 0; var TO_RADIANS = Math.PI/180; var SPEED = 5; var X = pageX; var Y = pageY; function start() { x = []; y = []; /*初期座標*/ x[0] = X / 2; y[0] = 0; x[1] = 150; y[1] = 0; img = []; img[0] = new Image (); img[0].src = "data:image/png;base64,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"; img[1] = new Image (); img[1].src = "data:image/png;base64,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"; // img[2] = new Image (); // img[2].src = ""; // img[3] = new Image (); // img[3].src = ""; // img[4] = new Image (); // img[4].src = ""; // img[5] = new Image (); // img[5].src = ""; var time; time = setInterval(function(){ draw(X,Y); },SPEED); } function draw(X,Y) { ctx.clearRect (0 , 0 , pageX , pageY); drawRotatedImage(img[0],x[0], y[0],counter1); drawRotatedImage(img[1],x[1], y[1],counter2); /*回転用 角度*/ counter1 += 0.5; counter2 += 0.3; /*落下スピード*/ x[0] -= 1 * Math.random(); y[0] += 2; x[1] -= 1 * Math.random(); y[1] += 1; /*再描画判定座標*/ if(y[0] > pageY + 20){ x[0] = pageX / 2; y[0] = 0; } if(y[1] > pageY + 20){ x[1] = pageX / 3; y[1] = 0; } } /*回転*/ function drawRotatedImage(image, x, y, angle) { ctx.save(); ctx.translate(x, y); ctx.rotate(angle * TO_RADIANS); ctx.drawImage(image, -(image.width/2), -(image.height/2)); ctx.restore(); } /*ループ*/ window.requestAnimationFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60); }; })(); requestAnimationFrame(start); sizing(); } function sizing(){ $('#canvas').attr({height:$('#wrap').height()}); $('#canvas').attr({width:$('#wrap').width()}); } $(window).load(function(){ pageY = $('#wrap').height(); pageX = $('#wrap').width(); canvasbg(pageY,pageX,0); }); });
- 初期座標、イメージパスを指定する。
- 画像を描画する際に回転用の関数を使用する。
- 角度をつける(インクリメント)
- 落下スピードを指定する。
- 最下部までいったら元の位置に戻す。
応用として、「雪」「落ち葉」「雨」などにも適応できそうです。