canvasをいじってみる-3
canvas要素いじりの第3回。
アニメーションさせてみる。
と言っても、ものすごい簡単なものから。
(canvasは「width="200" height="200"」に設定。)
onload = function(){
var canvas = document.getElementById('anime');
if ( ! canvas || ! canvas.getContext ) {return false;}
var ctx = canvas.getContext('2d');
var base={x:0,y:0};
var rate=30; /*--フレームレート--*/
var loop=function(){
if ((base.y<160)&&(base.x==0)) {
base.y=base.y+2;
}
else if ((base.y==160)&&(base.x<160)) {
base.x=base.x+2;
}
else if ((base.y<=160)&&(base.y>0)&&(base.x==160)) {
base.y=base.y-2;
}
else if ((base.y==0)&&(base.x<=160)&&(base.x>0)){
base.x=base.x-2;
}
else{
base.y=base.y+2;
}
/*--キャンバスをクリア--*/
ctx.beginPath();
ctx.clearRect(0, 0, canvas.width, canvas.height);
/*--短形の描画--*/
ctx.beginPath();
ctx.fillStyle = '#bed3ed'; /*--塗りつぶしの色--*/
ctx.fillRect(base.x, base.y, 40, 40);
setTimeout(loop, 1000/rate);
}
loop();
};ん～、3Dでグリグリとか、なんかそーいうのまで道のりは険しいなぁ・・・(汗)