やっぱり。JavaScript！- やっぱり画像！2
canvas のグリッドもしくは 座標空間
グリッドの原点は左上の角 ( 座標 (0,0) ) に位置します。全ての要素がこの原点から相対的に配置されます。
座標というと真ん中からx (横軸)、y(縦軸)というふうに考えてしまいますが、このcanvasの描画では左上が原点(0,0)となります。
Canvasは 2 つの原始図形「矩形」と「パス（複数の点が線によって結ばれている）」を書くことができます。
Canvasはいろんなことができます。以下メソッド一覧です。
矩形（長方形）
図形のコードは以下となります。
fillRect(x, y, width, height)
塗りつぶされた矩形を描きます。
strokeRect(x, y, width, height)
矩形の輪郭を描きます。
clearRect(x, y, width, height)
指定された領域を消去し、完全な透明にします。
x, yが座標、width, heightが幅と長さとなります。例えば以下のコード。
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);まずfillRectなので黒四角の塗りとぶしです。そして、clearRectなので、塗り潰しがあれば消します。ここで黒四角は真ん中が抜けた四角になります。そして最後にstrokeRectなので線で四角を書いています。
パス
で描画する方法です。
とにかくどんなふうに書くかというと、例えば三角形のパス
ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.fill();beginPath()でパスを書くことを宣言して開始します。
moveTo()で指定した座標に飛びます。上の例では"x"が75、"y"が50に始点が作られます。そしてlineTo()で線が引かれ、fill()で色が塗られます。
次に円ですが、
ctx.beginPath();
ctx.arc(75, 75, 50, 0, 2 * Math.PI,false);
ctx.stroke()で円がかけます。
arc(x, y, radius, startAngle, endAngle, anticlockwise)
(x, y) を中心の位置、radius を半径、startAngle を開始角度、endAngle を終了角度、anticlockwise を方向 (デフォルトは時計回り) とする円弧を描きます。
円の場合は開始角度、終了角度がそれぞれ「0 , 2 * Math.PI」となります。
"2 * Math.PI"という角度はラジアンが単位となっています。ラジアンについてはこのサイトが参考になります。
複雑な図形は矩形、円、ベジェ曲線を使って書くこともできますが、なかなか理解が難しいです。
この記事が気に入ったらサポートをしてみませんか？