Líneas discontinuas

También podemos dibujar líneas discontinuas en <canvas> utilizando el método setLineDash().

	JavaScript	Descripción	Defecto
beginPath()	context.beginPath();	Empezamos a dibujar
lineWidth	context.lineWidth=numero;	Determina (sets) o devuelve (returns) la grosor de la línea.	1
strokeStyle	context.strokeStyle=color\|gradient\|pattern;	Determina (sets) o devuelve (returns) el color, gradiente o patrón de la línea.	negro
moveTo()	context.moveTo(x,y);	Mueve el "lapiz" a un punto en el canvas, especificado por sus coordenadas "x" e "y". NO DIBUJA ninguna línea.	x=0; y=0;
lineTo()	context.lineTo(x,y);	Define una línea desde un punto especificado anteriormente hasta otro punto especificado por sus coordenadas "x" e "y". Mueve el "lapiz" a este punto.
stroke()	context.stroke();	Dibuja una línea ya definida. ¡OJO! Sin `stroke()` no hay línea.
setLineDash()	context.setLineDash();	Método que se utiliza para crear líneas discontinuas.
getLineDash();	context.getLineDash();	Propiedad que especifica el desplazamiento (offset) inicial de una línea discontinua.
lineDashOffset	context.lineDashOffset;	Método que devuelve la lista de valores utilizada para crear una línea discontinua. Ejemplo: `console.log(context.getLineDash());`

Vea la chuleta con las propiedades y metodos() de canvas.

El método setLineDash()

Podemos dibujar líneas discontinuas en <canvas> utilizando el método setLineDash(), que toma como argumento una lista de números separados por comas, que definen el patrón a seguir.
Por ejemplo ctx.setLineDash([10, 5]) define una línea compuesta por fragmentos de línea de 10px separados por espacios de 5px.
Para desactivar las líneas discontinuas podemos utilizar ctx.setLineDash([]), como en el siguiente ejemplo, o podemos utilizar los métodos save() y restore() para aislar la parte de código que establece el patrón de líneas discontinuas.
Vea algunos ejemplos:


var c = document.getElementById("c");
var ctx = c.getContext("2d");
var cw = c.width = 300;
var ch = c.height = 175;
var cx = cw / 2,
  cy = ch / 2;
var rad = Math.PI / 180;

ctx.strokeStyle = "red";
ctx.lineWidth = 3;

ctx.setLineDash([4, 14]);
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(250, 50);
ctx.stroke();

ctx.setLineDash([4, 14, 18]);
ctx.beginPath();
ctx.moveTo(50, 75);
ctx.lineTo(250, 75);
ctx.stroke();

ctx.setLineDash([4, 14, 2, 16]);
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(250, 100);
ctx.stroke();

ctx.setLineDash([]);
ctx.beginPath();
ctx.moveTo(50, 125);
ctx.lineTo(250, 125);
ctx.stroke();

La propiedad lineDashOffset

Una propiedad relacionada es ctx.lineDashOffset, que especifica el desplazamiento ( offset ) inicial como en el siguiente ejemplo:


var c1 = document.getElementById("c1");
var ctx1 = c1.getContext("2d");
var cw = c1.width = 300;
var ch = c1.height = 200;
var cx = cw / 2,
  cy = ch / 2;

ctx1.strokeStyle = "red"

ctx1.setLineDash([14, 4]);

ctx1.lineDashOffset = 0;
ctx1.beginPath();
ctx1.moveTo(0, cy - 10);
ctx1.lineTo(cw, cy - 10);
ctx1.stroke();

ctx1.lineDashOffset = 9;
ctx1.beginPath();
ctx1.moveTo(0, cy + 10);
ctx1.lineTo(cw, cy + 10);
ctx1.stroke();

Las dos líneas son iguales, solo que la segunda tiene un desplazamiento ctx.lineDashOffset = 9;

Hormigas andadoras

Podemos utilizar la propiedad ctx.lineDashOffset para realizar animaciones de tipo "hormigas que marchan" ( marching ants )


var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var cw = canvas.width = 300;
var ch = canvas.height = 200;
var cx = cw / 2,
  cy = ch / 2;

context.strokeStyle = "red"

var offset = 0;

function dibujarRectangulo() {
  context.clearRect(0, 0, cw, ch);
  context.setLineDash([4, 4]);
  context.lineDashOffset = -offset;
  context.strokeRect(cx - 50, cy - 50, 100, 100);
}

function Animacion() {
  offset += .5;
  if (offset > 8) {
    offset = 0;
  }
  dibujarRectangulo();
  requestId = window.requestAnimationFrame(Animacion);
}

requestId = window.requestAnimationFrame(Animacion);

Lea más acerca de requestAnimationFrame

w3.unpo<code>todo