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