JavaScriptのCanvas APIのsetLineDash()メソッドを使い、破線を描画する方法を解説します。

目次 [ close ]
  1. 下準備
  2. setLineDash()メソッドで破線を描画
  3. lineDashOffsetプロパティでオフセット（ズレ）を指定
  4. アニメーションする破線

下準備

まずは下準備から。htmlの<body></body>内に以下のcanvas要素を配置します。

<canvas id="canvas"></canvas>

jsにてコンテキストを取得します。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas

画像ではキャンバスの範囲がわかりやすいようにcssにて背景色を設定してあります。

setLineDash()メソッドで破線を描画

まずは矩形を描画します。

ctx.strokeRect(10, 10, 80, 80);
矩形を描画

setLineDash()メソッドで破線パターンを指定することができます。strokeRect()の直前に以下のコードを追加します。

ctx.setLineDash([4, 4]);
破線で矩形を描画

setLineDash()の引数には配列で、線の長さ、隙間の長さを交互に指定します。空の配列を渡すと実線に戻すことができます。

lineDashOffsetプロパティでオフセット（ズレ）を指定

lineDashOffsetプロパティで破線パターンの開始点を指定することができます。setLineDash()の下に以下のコードを追加します。

ctx.lineDashOffset = 2;
lineDashOffsetで破線パターンに偏りを設定

破線全体に2pxのズレができているのがわかります。

アニメーションする破線

アプリの範囲選択でよく見るアニメーションの作り方を紹介します。破線が回転し続けることで境界線が判別しやすくなります。下準備の後、以下のコードを追加すると完成です。

const segments = [4, 2];
const OFFSET_MAX = segments[0] + segments[1] - 1;
let offset = 0;
ctx.setLineDash(segments);
march();

function march() {
  ctx.lineDashOffset = offset;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.strokeRect(10, 10, 80, 80);
  offset++;
  if (offset > OFFSET_MAX) offset = 0;
  setTimeout(march, 100);
}
破線が回転し続けるアニメーション

実行すると蟻の行進のように破線が反時計回りに回転し続けます。