やっぱり。JavaScript!- やっぱり画像!2
canvas のグリッドもしくは 座標空間
座標というと真ん中からx (横軸)、y(縦軸)というふうに考えてしまいますが、このcanvasの描画では左上が原点(0,0)となります。
Canvasは 2 つの原始図形「矩形」と「パス(複数の点が線によって結ばれている)」を書くことができます。
Canvasはいろんなことができます。以下メソッド一覧です。
矩形(長方形)
図形のコードは以下となります。
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()
で円がかけます。
"2 * Math.PI"という角度はラジアンが単位となっています。ラジアンについてはこのサイトが参考になります。
複雑な図形は矩形、円、ベジェ曲線を使って書くこともできますが、なかなか理解が難しいです。
この記事が気に入ったらサポートをしてみませんか?