El método closePath() simplemente agrega una línea recta al trazado, desde el último al primer punto, cerrando la figura.
Usando el método stroke() al final de nuestro trazado dibujamos un triángulo vacío en el lienzo. Para lograr una figura sólida, este método debe ser reemplazado por fill():
Código 7-9. Triángulo sólido.
function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
lienzo.beginPath();
lienzo.moveTo(100,100);
lienzo.lineTo(200,200);
lienzo.lineTo(100,200);
lienzo.fill();
}
window.addEventListener("load", iniciar, false);
Ahora la figura en la pantalla será un triángulo sólido. El método fill() cierra el trazado automáticamente, por lo que ya no tenemos que usar closePath() para lograrlo.
Uno de los métodos mencionados anteriormente para dibujar un trazado en el lienzo fue clip(). Este método en realidad no dibuja nada, lo que hace es crear una máscara con la forma del trazado para seleccionar qué será dibujado y qué no. Todo lo que caiga fuera de la máscara no se dibujará en el lienzo. Veamos un ejemplo:
Código 7-10. Usando el triángulo anterior como una máscara.
function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
lienzo.beginPath();<
lienzo.moveTo(100,100);
lienzo.lineTo(200,200);
lienzo.lineTo(100,200);
lienzo.clip();
lienzo.beginPath();
for(f=0; f<300; f=f+10){
lienzo.moveTo(0,f);
lienzo.lineTo(500,f);
}
lienzo.stroke();
}
window.addEventListener("load", iniciar, false);
Para mostrar exactamente cómo funciona el método clip(), en el Código 7-10 utilizamos un bucle for para crear líneas horizontales cada 10 pixeles. Estas líneas van desde el lado izquierdo al lado derecho del lienzo, pero solo las partes de las líneas que caen dentro de la máscara (el triángulo) serán dibujadas.
Ahora que ya sabemos cómo dibujar trazados, es tiempo de ver el resto de las alternativas con las que contamos para crearlos. Hasta el momento hemos estudiado cómo generar líneas rectas y formas rectangulares. Para figuras circulares, la API provee tres métodos: arc(), quadraticCurveTo() y bezierCurveTo(). El primero es relativamente sencillo y puede generar círculos parciales o completos, como mostramos en el siguiente ejemplo:
Código 7-11. Círculos con arc().
function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
lienzo.beginPath();
lienzo.arc(100,100,50,0,Math.PI*2, false);
lienzo.stroke();
}
window.addEventListener("load", iniciar, false);
Lo primero que seguramente notará en el método arc() en nuestro ejemplo es el uso del valor PI. Este método usa radianes en lugar de grados para los valores del ángulo. En radianes, el valor PI representa 180 grados, por lo que la formula PI*2 multiplica PI por 2 obteniendo un ángulo de 360 grados.
El Código 7-11 genera un arco con centro en el punto 100,100 y un radio de 50 pixeles, comenzando a 0 grados y terminando a Math.PI*2 grados, lo que representa un círculo completo. El uso de la propiedad PI del objeto Math nos permite obtener el valor preciso de PI.
Si necesitamos calcular el valor en radianes de cualquier ángulo en grados usamos la fórmula: Math.PI / 180 × grados, como en el próximo ejemplo:
Código 7-12. Un arco de 45 grados.
function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
lienzo.beginPath();
var radianes=Math.PI/180*45;
lienzo.arc(100,100,50,0,radianes, false);
lienzo.stroke();
}
window.addEventListener("load", iniciar, false);
Con el Código 7-12 obtenemos un arco que cubre 45 grados de un círculo. Intente cambiar el valor de la dirección a true (verdadero). En este caso, el arco será generado desde 0 grados a 315, creando un círculo abierto.
Una cosa importante a considerar es que si continuamos construyendo el trazado luego del arco, el actual punto de comienzo será el final del arco. Si no deseamos que esto pase tendremos que usar el método moveTo() para cambiar la posición del lápiz, como hicimos anteriormente. Sin embargo, si la próxima figura es otro arco (por ejemplo, un círculo completo) siempre recuerde que el método moveTo() mueve el lápiz virtual hacia el punto en el cual el círculo comenzará a ser dibujado, no el centro del círculo. Digamos que el centro del círculo que queremos dibujar se encuentra en el punto 300,150 y su radio es de 50. El método moveTo() debería mover el lápiz a la posición 350,150 para comenzar a dibujar el círculo.
Además de arc(), existen dos métodos más para dibujar curvas, en este caso curvas complejas. El método quadraticCurveTo() genera una curva Bézier cuadrática, y el método bezierCurveTo() es para curvas Bézier cúbicas. La diferencia entre estos dos métodos es que el primero cuenta con un solo punto de control y el segundo con dos, creando de este modo diferentes tipos de curvas.
Código 7-13. Curvas complejas.
function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
lienzo.beginPath();
lienzo.moveTo(50,50);
lienzo.quadraticCurveTo(100,125, 50,200);
lienzo.moveTo(250,50);
lienzo.bezierCurveTo(200,125, 300,125, 250,200);
lienzo.stroke();
}
window.addEventListener("load", iniciar, false);
Para la curva cuadrática movimos el lápiz virtual a la posición 50,50 y finalizamos la curva en el punto 50,200. El punto de control para esta curva fue ubicado en la posición 100,125.
La curva generada por el método bezierCurveTo() es un poco más compleja. Hay dos puntos de control para esta curva, el primero en la posición 200,125 y el segundo en la posición 300,125.
Los valores en la Figura 7-2 indican los puntos de control para las curvas. Moviendo estos puntos cambiamos la forma de la curva.
Figura 7-2. Representación de curvas Bézier y sus puntos de control.
Hágalo usted mismo: Puede agregar tantas curvas como necesite para construir su figura. Intente cambiar los valores de los puntos de control en el Código 7-13 para ver cómo afectan a las curvas. Construya figuras más complejas combinando curvas y líneas para entender cómo la construcción del trazado es realizada.
- Estilos de línea
Hasta esta parte del capítulo hemos usado siempre los mismos estilos de líneas. El ancho, la terminación y otros aspectos de la línea pueden ser modificados para obtener exactamente el tipo de línea que necesitamos para nuestros dibujos.
Existen cuatro propiedades específicas para este propósito:
- lineWidth :Esta propiedad determina el grosor de la línea. Por defecto el valor es 1.0 unidades.
- lineCap :Esta propiedad determina la forma de la terminación de la línea. Puede recibir uno de estos tres valores: butt, round y square.
- lineJoin :Esta propiedad determina la forma de la conexión entre dos líneas. Los valores posibles son: round, bevel y miter.
- miterLimit :Trabajando en conjunto con lineJoin, esta propiedad determina cuánto la conexión de dos líneas será extendida cuando la propiedad lineJoin es declarada con el valor miter.
Las propiedades afectarán el trazado completo. Cada vez que tenemos que cambiar las características de las líneas debemos crear un nuevo trazado.
Código 7-14. Propiedades para probar diferentes estilos de línea.
function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
lienzo.beginPath();
lienzo.arc(200,150,50,0,Math.PI*2, false);
lienzo.stroke();
lienzo.lineWidth=10;
lienzo.lineCap="round";
lienzo.beginPath();
lienzo.moveTo(230,150);
lienzo.arc(200,150,30,0,Math.PI, false);
lienzo.stroke();
lienzo.lineWidth=5;
lienzo.lineJoin="miter";
lienzo.beginPath();
lienzo.moveTo(195,135);
lienzo.lineTo(215,155);
lienzo.lineTo(195,155);
lienzo.stroke();
}
window.addEventListener("load", iniciar, false);
Comenzamos el dibujo en el Código 7-14 creando un trazado para un círculo completo con propiedades por defecto. Luego, usando lineWith, cambiamos el ancho de la línea a 10 y definimos la propiedad lineCap como round. Esto hará que el siguiente trazado sea más grueso y con terminaciones redondeadas. Para crear un trazado con estas características, primero movimos el lápiz a la posición 230,150 y luego generamos un semicírculo. Los extremos redondeados nos ayudarán a simular una boca sonriente.
Finalmente, agregamos un trazado creado con dos líneas para lograr una forma similar a una nariz. Las líneas para este trazado fueron configuradas con un ancho de 5 y serán unidas de acuerdo a la propiedad lineJoin y su valor miter. Esta propiedad hará a la nariz lucir puntiaguda, expandiendo las puntas de las líneas en la unión hasta que ambas alcancen un punto en común.
Hágalo usted mismo: Experimente con las líneas para la nariz modificando la propiedad miterLimit (por ejemplo, con la instrucción miterLimit=2). Cambie el valor de la propiedad lineJoin a round o bevel. También puede modificar la forma de la boca probando diferentes valores para la propiedad lineCap.
- Texto
Escribir texto en el lienzo es tan simple como definir unas pocas propiedades y llamar al método apropiado. Tres propiedades son ofrecidas para configurar texto:
- font :Esta propiedad tiene una sintaxis similar a la propiedad font de CSS, y acepta los mismos valores.
- textAlign :Esta propiedad alinea el texto. Existen varios valores posibles: start (comienzo), end (final), left (izquierda), right (derecha) y center (centro).
- textBaseline :Esta propiedad es para alineamiento vertical. Establece diferentes posiciones para el texto (incluyendo texto Unicode). Los posibles valores son: top, hanging, middle, alphabetic, ideographic y bottom.
- strokeText(texto, x, y) :Del mismo modo que el método stroke() para el trazado, este método dibujará el texto especificado en la posición x,y como una figura vacía (solo los contornos). Puede también incluir un cuarto valor para declarar el tamaño máximo. Si el texto es más extenso que este último valor, será encogido para caber dentro del espacio establecido.
- fillText(texto, x, y) :Este método es similar al método anterior excepto que esta vez el texto dibujado será sólido (igual que la función para el trazado).
Código 7-15. Dibujando texto.
function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
lienzo.font="bold 24px verdana, sans-serif";
lienzo.textAlign="start";
lienzo.fillText("Mi mensaje", 100,100);
}
window.addEventListener("load", iniciar, false);
Como podemos ver en el Código 7-15, la propiedad font puede tomar varios valores a la vez, usando exactamente la misma sintaxis que CSS. La propiedad textAling hace que el texto sea dibujado desde la posición 100,100 (si el valor de esta propiedad fuera end, por ejemplo, el texto terminaría en la posición 100,100). Finalmente, el método fillText dibuja un texto sólido en el lienzo.
Además de los previamente mencionados, la API provee otro método importante para trabajar con texto:
- measureText() :Este método retorna información sobre el tamaño de un texto específico.
Puede ser útil para combinar texto con otras formas en el lienzo y calcular posiciones o incluso colisiones en animaciones.
Código 7-16. Midiendo texto.
function iniciar(){
var elemento=document.getElementById('lienzo');
lienzo=elemento.getContext('2d');
lienzo.font="bold 24px verdana, sans-serif";
lienzo.textAlign="start";
lienzo.textBaseline="bottom";
lienzo.fillText("Mi mensaje", 100,124);
var tamano=lienzo.measureText("Mi mensaje");
lienzo.strokeRect(100,100,tamano.width,24);
}
window.addEventListener("load", iniciar, false);
En este ejemplo comenzamos con el mismo Código 7-15, pero agregamos un alineamiento vertical. La propiedad textBaseline fue establecida como bottom (inferior), lo que significa que la base o parte inferior del texto estará ubicada en la posición 124. Esto nos ayudará a conocer la posición vertical exacta del texto en el lienzo.
Usando el método measureText() y la propiedad width (ancho) obtenemos el tamaño horizontal del texto. Con esta medida estamos listos para dibujar un rectángulo que rodeará al texto.
Hágalo usted mismo: Utilizando el Código 7-16, pruebe diferentes valores para las propiedades textAlign y textBaseline. Use el rectángulo como referencia para comprobar cómo estas propiedades trabajan. Escriba un texto diferente para ver cómo el rectángulo se adapta automáticamente a su tamaño.
Twittear
No hay comentarios:
Publicar un comentario