canvas要素で破線を描画する

canvas要素で破線を描画するには、context.setLineDashメソッドを使用します。

構文

context.setLineDash(segments);
引数名 説明
第一引数 必須 segments number[] 破線の塗りと余白の幅を配列で交互に指定
  • ※ 第一引数に空の配列を指定すると実線として描画されます。

サンプルコード

HTML

<canvas width="400" height="200" id="sample"></canvas>

JavaScript

var sampleElem = document.getElementById('sample'),
    ctx        = sampleElem.getContext('2d');

ctx.beginPath();
ctx.setLineDash([2, 2]);
ctx.moveTo(10, 10);
ctx.lineTo(390, 10);
ctx.stroke();

ctx.beginPath();
ctx.setLineDash([2, 2, 10, 2]);
ctx.moveTo(10, 20);
ctx.lineTo(390, 20);
ctx.stroke();

JavaScript逆引きリファレンス一覧へ戻る