canvas要素にパス（直線）を描画する
canvas要素にパス（直線）を描画するには、context.beginPathとcontext.moveTo、context.lineToメソッド、context.closeToメソッドを使用します。
context.beginPathメソッドはパスを開始するとき、context.moveToメソッドは線の開始位置、context.lineToメソッドは開始以降の線の位置、context.closePathメソッドは線を閉じるときに使用します。
塗りつぶしはcontext.fillメソッド、輪郭線はcontext.strokeメソッドを使用します。
構文
// パスの開始
context.beginPath();
// 線の開始位置
context.moveTo(x, y);
// 開始以降の線の位置
context.lineTo(x, y);
// パスを閉じる
context.closePath();引数
| 引数名 | 型 | 説明 |
|---|---|---|
| x 必須 |
number | X座標 |
| y 必須 |
number | Y座標 |
サンプルコード
HTML
<canvas width="150" height="150" id="sample"></canvas>JavaScript
var canvasElem = document.getElementById('sample'),
ctx = canvasElem.getContext('2d');
ctx.beginPath();
ctx.moveTo(25, 25);
ctx.lineTo(75, 100);
ctx.lineTo(125, 25);
ctx.stroke();デモ
左から輪郭線、塗りつぶし、パスを閉じているデモです。