HTMLキャンバス座標
キャンバス座標
HTMLキャンバスは2次元グリッドです。
キャンバスの左上隅の座標は（0,0）です
前の章では、次のメソッドが使用されていることを確認しました：fillRect（0,0,150,75）。
つまり、左上隅（0,0）から開始して、150x75ピクセルの長方形を描画します。
座標の例
下の長方形にマウスを合わせると、x座標とy座標が表示されます。
バツ
Y
線を引く
キャンバスに直線を描くには、次の方法を使用します。
- moveTo（x、y）-線の始点を定義します
- lineTo（x、y）-線の終点を定義します
実際に線を引くには、stroke（）などの「ink」メソッドの1つを使用する必要があります。
例
位置（0,0）に開始点を定義し、位置（200,100）に終了点を定義します。次に、stroke（）メソッドを使用して、実際に線を描画します。
var canvas = document.getElementById("myCanvas");
var 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（）メソッドを使用して、実際に円を描きます。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();