Canvasでアニメーションをする
Canvas(JavaScript)をマスターするためにがんばってます。
JavaScriptも全然わかっていないのですが、Canvasはビジュアルがあって理解しやすいと思い、いきなりCanvasに手をつけています。
アニメーションする
今回は、アニメーションです。
アニメーションは、Canvasの醍醐味のうちの1つです。
以下のコードを使います。
window.requestAnimationFrame(function);
functionの関数の中に「window.requestAnimationFrame()」を入れます。
どうやって説明したらいいの・・・
MDNには以下です。
説明を見たところで何もわからないですが(泣)、こんな感じです。
function loop() {
// コード
window.requestAnimationFrame(loop);
}
私は、「window.requestAnimationFrame(loop)」にきたら、「function loop()」に戻ると理解しました。
赤い四角が左右に言ったり来たりする
function render() {
loop();
}
function loop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// background
ctx.fillStyle = '#aaa';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// rect
ctx.fillStyle = 'red';
ctx.fillRect(x, 110, 30, 30);
if (x < 0 || x > canvas.width) {
d = d * -1;
}
x = x + 10 * d;
window.requestAnimationFrame(loop);
}
ブラウザでみたい方は下の私の個人サイト↓を見てください。愛想のないサイトですが。。。
この記事が気に入ったらサポートをしてみませんか?