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();