Trazar una línea
Para dibujar lineas en el <canvas>
necesitamos algunas de las propiedades y métodos predefinidos en el HTML5:
JavaScript | Descripción | Defecto | |
---|---|---|---|
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 |
beginPath() | context.beginPath(); | Empezamos a dibujar | |
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. |
Vea la chuleta con las propiedades y metodos() de canvas.
Supongamos que queremos dibujar una línea de 3px de gruesa ( line width = ancho de la línea ).
Escribimos: ctx.lineWidth = 3;
Note por favor que escribimos 3
y no 3px. Si no especificamos lineWidth
, el ancho de línea será de 1px.
Queremos tambien que nuestra línea sea roja. ( stroke style = estilo de trazado ).
Escribimos: ctx.strokeStyle = "#f00";
Si no especificamos strokeStyle
, el el color del trazado será negro.
Decidido todo esto empezamos a dibujar:ctx.beginPath();
Nuestro lapiz tocará el canvas a x=20px, y=130px.
ctx.moveTo(20, 130);
Esbozamos una línea desde x=20px, y=130px ( el punto definido anteriormente ) a x=230px, y=20px.
ctx.lineTo(230, 20);
Finalmente trazamos nuestra linea. Note por favor que sin stroke()
no habrá línea:ctx.stroke();
A continuación lo ponemos todo junto:
window.onload = function() {
var canvas = document.getElementById("linea1");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {
ctx.lineWidth = 3;
ctx.strokeStyle = "#f00";
ctx.beginPath();
ctx.moveTo(20, 130);
ctx.lineTo(230, 20);
ctx.stroke();
}
}
}
Como dibujar líneas finas
Por defecto el <canvas>
de HTML5 “suaviza” las líneas, y esto queda muy bien en las líneas oblicuas.
Sin embargo las líneas horizontales y verticales parecen más gruesas de lo que son en realidad.
Esto llega a ser muy evidente, incluso molesto, en líneas muy finas ( ctx.lineWidth = 1
), por ejemplo la cuadricula de un gráfico.
La buena noticia es que podemos eludir este problema utilizando el método translate().
En el caso de las líneas horizontales aplicaremos ctx.translate(0, .5);
Para las líneas verticales utilizaremos ctx.translate(.5, 0);
window.onload = function() {
var canvas2 = document.getElementById("linea2");
if (canvas2 && canvas2.getContext) {
var ctx = canvas2.getContext("2d");
if (ctx) {
ctx.lineWidth = 1;
ctx.strokeStyle = "#f00";
//dibuja la primera línea
ctx.beginPath();
ctx.moveTo(20, 25);
ctx.lineTo(230, 25);
ctx.stroke();
// dibuja una segunda línea MÁS FINA;
ctx.translate(0, .5);
ctx.beginPath();
ctx.moveTo(20, 50);
ctx.lineTo(230, 50);
ctx.stroke();
}
}
}
Dividir una línea en n segmentos iguales
Veamos primero cómo encontrar el punto medio de una línea.
Hemos visto que para trazar una línea en <canvas> necesitamos conocer las coordinadas x e y de sus dos extremos:
var a = {x:50, y:50} // el punto a var b = {x:300, y:250} // el punto b ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y);
Las coordinadas del punto medio las encontramos dividiendo por 2 la distancia en x: (b.x - a.x)/2
y la distancia en y: (b.y - a.y)/2
. A esto le sumamos el valor de las coordenadas del primer punto ( a.x
y respectivamente a.y
).
var puntoMedio = { x: a.x + (b.x - a.x)/2, y: a.y + (b.y - a.y)/2 }
Para dividir una línea en n segmentos iguales hacemos lo mismo, solo que esta vez en lugar de dividir por 2 dividimos por n:
var n = 10; for( var i = 0; i < = n; i++){ var s = {x:((b.x - a.x)*(i/n))+ a.x, y:((b.y - a.y)*(i/n))+ a.y} . . . }
var c = document.getElementById("canv");
var contexto = c.getContext("2d");
var cw = c.width = 350,
cx = cw / 2;
var ch = c.height = 300,
cy = ch / 2;
var rad = Math.PI / 180;
var a = {
x: 50,
y: 50,
text: " A"
}
var b = {
x: 300,
y: 250,
text: " B"
}
contexto.beginPath();
contexto.moveTo(a.x, a.y);
contexto.lineTo(b.x, b.y);
contexto.stroke();
contexto.font = "16px Verdana";
contexto.fillStyle = "blue";
contexto.fillText(a.text, a.x, a.y - 5);
contexto.fillText(b.text, b.x + 5, b.y);
var m = {
x: ((b.x - a.x) / 2) + a.x,
y: ((b.y - a.y) / 2) + a.y
}
contexto.beginPath();
contexto.strokeStyle = "red";
var n = 10;
for (var i = 0; i <= n; i++) {
var s = {
x: ((b.x - a.x) * i / n) + a.x,
y: ((b.y - a.y) * i / n) + a.y
}
contexto.beginPath();
contexto.arc(s.x, s.y, 3, 0, 2 * Math.PI);
contexto.stroke();
}