CanvasRenderingContext2D: lineDashOffset プロパティ
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。
CanvasRenderingContext2D.lineDashOffset はキャンバス 2D API のプロパティで、破線のオフセット、または「位相」を設定します。
メモ:
線は stroke() メソッドを呼び出すことで描画されます。
値
破線のオフセット量を指定する浮動小数点数。デフォルト値は 0.0 です。
例
破線をずらす
この例では 2 本の破線が描画されます。まず最初の線には破線オフセットがありません。2 つ目は破線オフセットが 4 です。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.setLineDash([4, 16]);
// オフセットのない破線
ctx.beginPath();
ctx.moveTo(0, 50);
ctx.lineTo(300, 50);
ctx.stroke();
// オフセットが 4 である破線
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.lineDashOffset = 4;
ctx.moveTo(0, 100);
ctx.lineTo(300, 100);
ctx.stroke();
結果
オフセット付き破線は赤色で描画されます。
アリの行進
アリの行進効果は、コンピュータグラフィックスプログラムの選択ツールで多くの場合見られるアニメーション技法です。選択範囲の境界線をアニメーション化することで、ユーザーが選択範囲の境界線と画像の背景を判別しやすくします。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let offset = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.setLineDash([4, 2]);
ctx.lineDashOffset = offset;
ctx.strokeRect(10, 10, 100, 100);
}
function march() {
offset++;
if (offset > 5) {
offset = 0;
}
draw();
setTimeout(march, 20);
}
march();
仕様書
| 仕様書 |
|---|
| HTML # dom-context-2d-linedashoffset-dev |