336
ボールで遊ぼう 2
ボールを動かそう<br><br> 1. 変数 dx, dyを変更して、ボールの動きを見てみましょう。
<canvas width="450" height="300"></canvas>
canvas { background: #eee; width: 100%; }
const canvas = document.querySelector('canvas'); const ctx = canvas.getContext("2d"); let x = 225; // ボール位置 x座標 let y = 250; // ボール位置 y座標 let dx = 2; // ボールの速さ x方向 let dy = -2; // ボールの速さ y方向 function drawBall() { ctx.beginPath(); ctx.arc(x, y, 10, 0, Math.PI*2); ctx.fillStyle = "red"; ctx.fill(); ctx.closePath(); } function update() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBall(); x += dx; y += dy; requestAnimationFrame(update); } update();
目次
ボールで遊ぼう 2
ボールを動かそう
1. 変数 dx, dyを変更して、ボールの動きを見てみましょう。
HTML
CSS
Javascript0
Javascript1
Javascript2
Javascript3