HTML Canvas 座標
キャンバス座標
HTMLキャンバスは二つのグリッドです。
キャンバスの左上角座標は (0,0) です。
前章では、メソッド fillRect(0,0,150,75) を使用しました。
これは、左上角 (0,0) から 150x75 ピクセルの矩形を描画することを意味します。
座標実例
以下の矩形にマウスを合わせると、その x と y 座標を確認できます：
X
Y
線を描画
キャンバス上に直線を描画するには、以下のメソッドを使用してください：
- moveTo(x,y) - 線の起点を定義
- lineTo(x,y) - 線の終点を定義
実際に線を描画するには、「塗料」メソッドのいずれかを使用する必要があります。例えば、stroke()。
實例
位置 (0,0) で起点を定義し、位置 (200,100) で終点を定義します。その後、stroke() メソッドを使用して実際に線を描画します：
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
円を描画
キャンバス上に円を描画するには、以下のメソッドを使用してください：
- beginPath() - 路径を開始
- arc(x,y,r,startangle,endangle) - 円弧/曲線を作成
arc() を使用して円を作成する場合：開始角度を 0、終了角度を 2 * Math.PI に設定してください。x と y パラメータは円の中心の x と y 座標を定義します。r パラメータは円の半径を定義します。
實例
使用 arc() 方法定義一个圆。然後使用 stroke() 方法來實際繪製圆：
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
