2012年03月17日

Canvsアニメーションで反射を制御する

単純なアニメーションの反射ではなく、角度をもったアニメーションで反射を制御する為には反射角の法則を利用します。入射角と反射角は等しくなるので壁と反射したタイミングで角度の変更を行ないます。左右の壁とぶつかった場合は現在の180度から現在の角度を引いた角度を、天上と床に反射した際には360度から現在の角度を引いたものを新しい角度としてアニメーションさせます。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var speed=3;
var start = {x:0,y:0};
var point = {x:0,y:0};
var angle = 40;
var radians,moveX,moveY;
updateAngle();
function updateAngle(){
radians = angle * Math.PI / 180;
moveX = Math.cos(radians)*speed;
moveY = Math.sin(radians)*speed;
}
setTimeout(function(){
ctx.clearRect(0,0,500,500);
ctx.fillRect(point.x,point.y,50,50);
point.x += moveX;
point.y += moveY;
if(point.x+50>400 || point.x<0){
angle = 180-angle;
updateAngle();
}
if(point.y+50>400 || point.y<0){
angle = 360-angle;
updateAngle();
}
setTimeout(arguments.callee, 20);
},1);​


サンプル

HTML5 canvas 入門一覧
タグ:Canvas
posted by ねこまんま at 14:24 | Comment(1) | TrackBack(0) | HTML5 | 更新情報をチェックする
この記事へのコメント
以下2点の原理が分かりません。
宜しければ原理をご教授お願い致します。

@左右の壁とぶつかった場合は現在の180度から現在の角度を引いた角度

A天上と床に反射した際には360度から現在の角度を引いたものを新しい角度
Posted by 初心者 at 2013年10月05日 19:53
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック