JavaScriptによるCanvasでの線の描画
簡単なものから始めましょう - 線の描画です。どうやって行われるかを理解するために、 紙と鉛筆を持っていると想像してください。あなたはその紙に描くこともできますし、 描かずに単に鉛筆を必要な場所に移動させることもできます。
JavaScriptも同じように動作します: 鉛筆（または描画ペン）を持っており、
必要な場所にメソッド moveTo を使って移動させることができ、
描画するにはメソッド lineTo を使用します。
両方のメソッドは、ペン先を移動させる先の点をパラメータとして受け取ります - 最初のパラメータは水平座標、
2番目は垂直座標です。座標の原点、点 0,
0 は要素の左上隅です。
ペンが必要な点に移動するとき -
メソッド moveTo は単に移動するだけで、
lineTo は移動過程で、ペンの現在位置から移動先の点まで線を描画します。
しかし、上記のコードを実行しても何も起こりません:
さらに2つのコマンドを記述する必要があります: 最初のコマンド beginPath
は線の描画開始前に指定する必要があり、2番目のコマンド stroke は
すべての moveTo と lineTo の組み合わせの後に呼び出され、
線が描画されるようにする必要があります。
では、線を描画するための実際のコードを書いてみましょう:
線を描画しよう
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
鳥を描画しよう
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
三角形を描画しよう
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
:
正方形を描画しよう
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
:
図形の閉じ方
閉じた図形を描画するために、すべての線を引く必要はありません -
最後の線は自動的に描画されて図形を閉じることができます。
そのためには、メソッド stroke の前にメソッド closePath を呼び出す必要があります。
このメソッドは、終点から始点まで直線を引くことで図形を閉じようとします。 図形が既に閉じられているか、単なる点である場合、このメソッドは何もしません。
closePath を使って三角形を描画してみましょう:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - このステップは省略します
ctx.closePath();
ctx.stroke();
:
図形の塗りつぶし
メソッド stroke の代わりにメソッド fill を使用することができます -
この場合、図形が完全に閉じている必要はなく、そのまま塗りつぶされます:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - このステップは省略します
//ctx.closePath(); - これも省略します
ctx.fill();
:
