![見出し画像](https://assets.st-note.com/production/uploads/images/127867218/rectangle_large_type_2_12078bbbb9fe760e2cc335a71c845fc1.png?width=1200)
わかりやすいJavaScript!-7 動かそう!
ライブラリを使話ない普通のJavaScriptで動かす命令としとよくt飼われているのが、
setInterval()
function で指定した関数を delay ミリ秒ごとに繰り返し実行します。
setTimeout()
function で指定した関数を delay ミリ秒後に実行します。
があります。そして別の方法として
requestAnimationFrame(callback)
アニメーションを実行することをブラウザーに通知し、次の再描画の前にアニメーションを更新するため、ブラウザーが指定の関数を呼び出すように要求します。
があります。その違いなどを見ていきます。
setInterval
通常は一定時間ごと実行。この場合だと1000mm秒後(1秒後)ごとに連続してcountUp()を実行します。
<script>
let count = 0;
function countUp(){
console.log(count++);
}
setInterval(countUp, 1000);
</script>
setInterval(関数, ミリ秒);
countUp()については以下
function countUp(){
console.log(count++);
}
は変数countで定義されている数字"0"に"1"ずつ加算していきます。1,2,3・・・ という感じにコンソールに出力されます。
setTimeout
通常は一定時間後、この場合だと1000mm秒後(1秒後)にcountUp()を実行します。
<script>
let count = 10;
function countUp(){
console.log(count);
}
setTimeout(countUp, 5000);
</script>
setTimeout((関数, ミリ秒);
setIntervalのように一定時間ごとで連続して実行したい場合
<script>
let count = 0;
function countUp(){
console.log(count++);
setTimeout(countUp, 1000);
}
countUp()
</script>
とすればできます。
requestAnimationFrame
より問題なくアニメーションを行うことができるものとなっています。
<script>
let count = 0;
function countUp(){
console.log(count++);
requestAnimationFrame(countUp);
}
countUp()
</script>
requestAnimationFrame(関数);
使い方はsetTimeoutと同じで関数の中に入れて使います。
参考
<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
</body>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, 10, 0, Math.PI*2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
x += dx;
y += dy;
requestAnimationFrame(draw);
// setTimeout(draw,10) でも同じことができます
}
draw()
この記事が気に入ったらサポートをしてみませんか?