わかりやすいJavaScript!-7 動かそう!
ライブラリを使話ない普通のJavaScriptで動かす命令としとよくt飼われているのが、
があります。そして別の方法として
があります。その違いなどを見ていきます。
setInterval
通常は一定時間ごと実行。この場合だと1000mm秒後(1秒後)ごとに連続してcountUp()を実行します。
<script>
let count = 0;
function countUp(){
console.log(count++);
}
setInterval(countUp, 1000);
</script>
countUp()については以下
は変数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>
使い方は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()
この記事が気に入ったらサポートをしてみませんか?