描画手順
今回は、円を描画してみたいと思います。
①HTML,JSを用意
基本的には、Canvas入門 - 線・矩形描画編で使用したものと同様のものを使用します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas'); // canvas要素への参照の取得
const ctx = canvas.getContext('2d'); // コンテキストの取得
</script>
</body>
</html>
②描画用メソッドの追記
円を描画するメソッドは以下です。
あくまで軌跡ですので、このあとfill()で塗りつぶすか、stroke()で線を描画します。
arc(x, y, radius, startAngle, endAngle, anticlockwise);
| 引数 | 内容 |
|---|---|
| x | 円の中心点のx座標 |
| y | 円の中心点のy座標 |
| radius | 半径 |
| startAngle | 円の開始角度 |
| endAngle | 円の終了角度 |
| anticlockwise(true or false) | trueで時計回り、falseで反時計回り |
以下のようなドキュメントに詳細が載っていますので、あわせてご確認ください。
> arc() メソッド
※角度について、1周は2π、半円はπです。
例1)円の描画
JSの中身を抜粋します。
const canvas = document.getElementById('canvas'); // canvas要素への参照の取得
const ctx = canvas.getContext('2d'); // コンテキストの取得
/* コンテキスト設定 */
ctx.strokeStyle = '#333'; // 塗りつぶしは暗めの色
ctx.fillStyle = '#f00'; // 線は赤色
ctx.lineWidth = 5; // 線の幅は5px
/* 円の描画 */
ctx.beginPath(); // パスの初期化
ctx.arc(100, 50, 30, 0, 2 * Math.PI); // (100, 50)の位置に半径30pxの円
ctx.closePath(); // パスを閉じる
ctx.fill(); // 軌跡の範囲を塗りつぶす
例2)扇型の描画
単純にarcの終了角度を下記のように変更すると
ctx.arc(100, 50, 30, 0, Math.PI / 6); // (100, 50)の位置に半径30pxの円、終了角度は「π = Math.PI（180度の半円)」
↓のようなよくわからない図が出力されます。
扇型として描画する際は、開始点の描画が必要となるため、以下のように「moveToメソッド」で円の中心を指定します。
const canvas = document.getElementById('canvas'); // canvas要素への参照の取得
const ctx = canvas.getContext('2d'); // コンテキストの取得
/* コンテキスト設定 */
ctx.strokeStyle = '#333'; // 塗りつぶしは暗めの色
ctx.fillStyle = '#f00'; // 線は赤色
ctx.lineWidth = 5; // 線の幅は5px
/* 円の描画 */
ctx.beginPath(); // パスの初期化
ctx.moveTo(100, 50); // 円の中心に筆をおろす
ctx.arc(100, 50, 30, 0, Math.PI / 6); // (100, 50)の位置に半径30pxの円
ctx.closePath(); // パスを閉じる
ctx.fill(); // 軌跡の範囲を塗りつぶす
すると↓のように扇型が出力されました。
例3)扇型、反時計回りの描画
開始角度と終了角度は同じですが、反時計回りのため、図の形が「例2」の反転した状態になります。
const canvas = document.getElementById('canvas'); // canvas要素への参照の取得
const ctx = canvas.getContext('2d'); // コンテキストの取得
/* コンテキスト設定 */
ctx.strokeStyle = '#333'; // 塗りつぶしは暗めの色
ctx.fillStyle = '#f00'; // 線は赤色
ctx.lineWidth = 5; // 線の幅は5px
/* 円の描画 */
ctx.beginPath(); // パスの初期化
ctx.moveTo(100, 50); // 円の中心に筆をおろす
ctx.arc(100, 50, 30, 0, Math.PI / 6, true); // (100, 50)の位置に半径30pxの円
ctx.closePath(); // パスを閉じる
ctx.fill(); // 軌跡の範囲を塗りつぶす
