335
ボールで遊ぼう 1
ボールを描くコードを見てみましょう。 <div class="cl-img-container"> <img class="cl-img" src="img/blo1-1.png"> </div> 1.円の中心座標を変更しましょう。<br> 2.半径の大きさを変更しましょう。<br> 3.red を blue に変更してみましょう。<br><br> <strong>arc()メソッドの引数</strong><br> 円の中心のx座標<br> 円の中心のy座標<br> 円の半径<br> 開始角度(ラジアン) 終了角度(ラジアン) Math.PI*2 = 360° 方向(false:時計回りデフォルト・true:半時計回り) 省略可能。
<canvas width="450" height="300"></canvas>
canvas { background: #eee; width: 100%; }
const canvas = document.querySelector('canvas'); const ctx = canvas.getContext("2d"); // ボールを描く ctx.beginPath(); ctx.arc(225, 150, 20, 0, Math.PI*2, false); ctx.fillStyle = "red"; ctx.fill(); ctx.closePath();
目次
ボールで遊ぼう 1
ボールを描くコードを見てみましょう。
1.円の中心座標を変更しましょう。
2.半径の大きさを変更しましょう。
3.red を blue に変更してみましょう。
arc()メソッドの引数
円の中心のx座標
円の中心のy座標
円の半径
開始角度(ラジアン) 終了角度(ラジアン) Math.PI*2 = 360° 方向(false:時計回りデフォルト・true:半時計回り) 省略可能。
HTML
CSS
Javascript0
Javascript1
Javascript2
Javascript3