読者です 読者をやめる 読者になる 読者になる

フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)Canvasの基本 線を描画する

Canvasで線を描画する方法を1つにまとめておきます。線の描画は「直線」か「曲線」の2種類の方法があります。

共通事項

線の描画はbeginPathで処理を開始してstrokeで描画を行い終了します。
まず、beginPathメソッドで処理を開始したら、moveToを使用して書き出し位置を指定します。
線の太さを指定する場合はlineWidthプロパティで、色の指定はstrokeStyleで行います。
描画の設定については、描画する線の種類に合わせて個別に行います。

直線

lineTo(x, y)

直線の描画はlineToメソッドで行います。引数にはx、yの座標が入ります。 moveToで指定した場所から、lineToで指定した場所まで直線を引いてくれます。
ふたたびlineToを指定すると、直前のlineToの座標から、新しいlineToの座標までの線が引かれます。
次のサンプルは、単純な三角形を描画します。

context.beginPath();     // 線の指定開始
context.moveTo(50, 0);   // 書き出し位置を頂点に持ってくる
context.lineTo(0, 75);   // 左下に向かって線を引く
context.lineTo(100, 75); // 右に向かって線を引く
context.lineTo(50, 0);   // 頂点に向かって線を引く
context.stroke();        // 描画開始。完了

曲線(ベジェ曲線

canvasで扱えるベジェ曲線には、二次ベジェ曲線と三次ベジェ曲線があります。始点から終点まで線を引き、終点側で線を制御するものを二次ベジェ曲線。始点と終点の両方で線を制御するものを三次ベジェ曲線といいます。二次ベジェ曲線quadraticCurveToメソッドで、三次ベジェ曲線bezierCurveToメソッドで指定します。

quadraticCurveTo ( controlPointX, controlPointY, endPointX, endPointY )

二次ベジェ曲線を作成するメソッドです。引数は順に制御点のx座標とy座標、終点のx座標とy座標です。制御点をおいた場所に向かって線が引っ張られるようになります。

bezierCurveTo ( startControlPointX, startControlPointY, endControlPointX, endControlPointY, endPointX, endPointY )

三次ベジェ曲線を作成するメソッドです。引数は順に開始側の制御点のx、y座標、修了側の制御点のx、y座標、終点のx、y座標です。

サンプル
context.beginPath();
context.moveTo(10,10);
context.quadraticCurveTo(150,100,300,10);
context.stroke();

context.beginPath();
context.moveTo(10,100);
context.bezierCurveTo(150,200,150,0,300,100);
context.stroke();
結果:
f:id:jmqys:20150924115933p:plain

角や端の設定

線の両端を設定する lineCap

線の両端の描画方法を指定します。lineCapプロパティの値に以下の文字列を指定します。

butt(デフォルト)
両端に何も表示しません。指定した長さがそのまま表示されます。
context.lineCap = 'butt';
と記述します。
square
両端にも太さを適用します。線の太さを10にした場合は、両端が5づつ長くなります。。
context.lineCap = 'square';
と記述します。
round
両端が丸くなります。直径が線の太さと同じ半円が両端に追加される形になります。
context.lineCap = 'round';
と記述します。

以下のサンプルは、butt、square、roundの順に幅15の線を描画したものです。中心のグレーの線は、指定した線の位置です。 f:id:jmqys:20150924131711p:plain

折れ線の角を設定する lineJoin

角のある線を描画した時の角の形を設定します。lineJoinプロパティの値に以下の文字列で指定します。

miter(デフォルト)
角が一点のとがった形になります。
context.lineJoin = 'miter';
と記述します。
bevel
角の尖った部分を切り取った形になります。
context.lineJoin = 'bevel';
と記述します。
round
角が丸くなります
context.lineJoin = 'round';
と記述します。

以下のサンプルは、左から順にmiter、bevel、roundを指定したものです。f:id:jmqys:20150924133339p:plain