CanvasRenderingContext2D.lineDashOffset

CanvasRenderingContext2D.lineDashOffset - фаза зміщення шаблону лінії тире.

Синтаксис:

ctx.lineDashOffset;

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

Опис:

lineDashOffset() властивість об'єкту CanvasRenderingContext2D яка задає / повертає фазу зміщення шаблону лінії тире. Тобто відстань між шаблонами.

Приклад:

var canvas = document.getElementById("canvas").getContext("2d");

canvas.lineDashOffset=5;
canvas.setLineDash([5,12]);

canvas.moveTo(2, 15);
canvas.lineTo(150,15);
canvas.stroke();

Приклад ефекту муравля для лінії:

var canvas = document.getElementById("canvas").getContext("2d");
canvas.strokeStyle="red";

function anime(){
canvas.lineDashOffset+=1;
if(canvas.lineDashOffset>4) canvas.lineDashOffset=-2;
canvas.setLineDash([4, 4]);

canvas.clearRect(0, 0, 200, 200);
canvas.moveTo(2, 15);
canvas.lineTo(150,15);
canvas.stroke();
setTimeout(anime, 200);
}

anime();