HTML Canvas 座標

Canvas の座標

HTML canvas は 2 次元グリッドです。

canvas の左上隅の座標は (0,0) です。

前の章で、次のメソッドの使用を見ました：fillRect(0,0,150,75).

これは、左上隅 (0,0) を始点として、150x75 ピクセルの矩形を描画しています。

下の矩形の上にマウスを乗せて、マウスの 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();