<html>
<head>
<meta charset="UTF-8">
<title>アニメーションのテスト</title>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#ceceff";//描画色を指定
var point = {x:0,y:0};//座標
var par = {x:4,y:6};//変化量
var timer;//タイマー
var delay = 50;//タイマーを実行する間隔
function draw(x,y){
ctx.clearRect(0,0,600,500);//一度canvasをクリア
ctx.fillRect(x,y,50,50);//pointの座標に描画
}
//繰り返し描画を行う関数。
var loop = function(){
//pointの数値をparの分だけ増やす
point.x = point.x + par.x;
point.y = point.y + par.y;
//描画処理を呼び出す
draw(point.x,point.y);
//タイマー(一度クリアしてから再設定。)
clearTimeout(timer);
timer = setTimeout(loop,delay);
}
loop();
}
</script>
</head>
<body>
<div id="stage">
<canvas id="can" width="600" height="500"></canvas>
</div>
</body>
</html>
最終更新：2013年05月18日 03:52
