Líneas discontinuas

facebook-svg gplus-svg twitter-svg

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:

Su navegador no soporta canvas :( 

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();
Su navegador no soporta canvas :(

La propiedad lineDashOffset

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

Su navegador no soporta canvas :( 

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;

Su navegador no soporta canvas :(

Hormigas andadoras

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

Su navegador no soporta canvas :( 

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);
Su navegador no soporta canvas :(

Lea más acerca de requestAnimationFrame