HTMLキャンバス座標

キャンバス座標

HTMLキャンバスは2次元のグリッドです。

キャンバスの左上隅には、座標は(0,0)

：前の章では、使用されるこの方法で見たfillRect(0,0,150,75) 。

これは、意味：左上隅に起動します(0,0)および150x75ピクセルの四角形を描画します。

そのxとy座標を参照するには、以下の四角形の上にマウス：

バツ

キャンバス上に直線を描画するには、以下の方法を使用します。

実際に線を引くには、のいずれかを使用しなければならない"ink"のようなメソッド、 stroke()

位置での出発点の定義(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()セットにMath.PI * 2に0と終了角度に角度を開始します。 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();