Contexto en Canvas
Canvas incluye un API que le permite dibujar y dar forma a elementos, texto e imágenes directamente en pantalla, en un área definida dentro del navegador. Puedes aplicar colores, rotaciones, transparencias alfa, manipulación de píxeles (excelente para crear juegos), varios tipos de líneas, curvas, cajas y rellenos para trabajar sobre la forma. Usaremos la API Canvas dibujando a través de JavaScript básico.
Implementación de Logo
El logo de HTML5 es producido por seis partes dibujadas en diferentes etapas, hay que tener en cuenta que en las coordenadas, el primer número es la distancia desde el borde izquierdo de la etiqueta <canvas> y el segundo número es la distancia desde el borde superior del mismo canvas definido.
Todo lo que se dibuja se realiza utilizando métodos y propiedades aplicados a la variable spot, manteniendo el contexto en 2D de canvas. El color para cualquier operación de llenado posterior, se establece mediante la asignación de un color a la propiedad fillStyle de canvas. Las formas se producen utilizando los métodos path. Por ejemplo el siguiente conjunto de declaraciones señala la forma de cinco caras de color naranja a partir de la esquina inferior izquierda este es código del fondo del logo:
spot.fillStyle = "#E34C26"; spot.beginPath(); spot.moveTo(39, 250); spot.lineTo(17, 0); spot.lineTo(262, 0); spot.lineTo(239, 250); spot.lineTo(139, 278); spot.closePath(); spot.fill();
El texto “HTML” del logo es dibujado mediante el método fillText y el color es tratado con fillStyle. Otra de las propiedades es font; esta propiedad puede contener el tamaño del texto y las fuentes que pueden ser una o más. El propósito de incluir más de una fuente es ofrecer opciones para el navegador, si la primera fuente no está disponible en el equipo que ejecuta el navegador. Durante la investigación encontré que la fuente que más se parece a la utilizada en el logo es Gill Sans Ultra Bold, te aconsejo que la consigas para que veas el resultado del experimento. Implementaremos de la siguiente manera:
var fontfamily = "65px 'Gill Sans Ultra Bold', sans-serif";
Después de estos parámetros color, tamaño y tipo de fuente es necesario la ubicación en nuestro canvas, recuerda que el objeto canvas es nuestro lienzo:
spot.fillText("HTML", 31,60);
Trabajando con transformación de coordeandas
Las posiciones se especifican mediante las distancias desde un punto de origen. Para canvas 2D (Porque también se puede hacer 3D con WebGL pero es otro tema), dos coordenadas son necesarias: la primera coordenada, que regula la horizontal, a menudo llamada la “X” y la segunda coordenada, que regula la vertical, llamada la ordenada, representada por la “Y”. Un hecho molesto es que al dibujar en las pantallas el eje “Y” se invierte para la vertical se mide desde la parte superior de canvas y la horizontal se mide desde la izquierda.
Esto significa que el punto (100,200) está más abajo en la pantalla que el punto (100,100). Ahora la situación es que cuando se dibuja las letras del logotipo “HTML” tiene que moverse hacia abajo de la pantalla requiriendo una transformación mediante traslación. La traslación se realiza justo en la vertical. La cantidad de traslación se almacena en una variable con nombré offsety:
var offsety = 80;
.......
spot.fillText("HTML", 31, 60);
ctx.translate(0, offsety);
En este ejemplo, tenemos una variable llamada factorvalue, que se establece invocando la función, cuando a través del objeto cambiemos el tamaño del logo pasando los siguientes valores:
ctx.scale(factorvalue, factorvalue);
Etiqueta de entrada <input> elemento deslizante
Como primera medida dependiendo del navegador puede verlo como un elemento deslizante o como una entrada de texto yo voy a trabajar con Chrome pues Firefox no es compatible todavía, con este tipo de entrada y el interés del post no es buscar un “hack” para habilitarlo, más bien lo dejo para que experimentes. Continuando con el post este elemento se ubica dentro de la etiqueta <body>, Los atributos de este tipo y otros elementos de entrada proporcionan formas de especificar el valor inicial, los valores mínimos y máximos, el ajuste de incremento más pequeño y la acción a tomar si el usuario cambia de ubicación la barra de desplazamiento. El código se vería de esta manera:
<input id="slide" type="range" min="0" max="100" value="100" onChange="changescale(this.value)" step="10" />
Al analizar este código se ven varios parámetros; el tipo de elemento type=”range” que repito no en todos los navegadores esta disponible los valores mínimo min=”0″ y máximo max=”100″, estos valores los tome sobre este rango, pero tienes la libertar de tomar lo que gustes. El otro atributo interesante es el evento onChange, que queda así onChange=”changescale(this.value)” y la función que invoca es la siguiente:
function changescale(val){
factorvalue = val/100;
drawLogo();
}
Dibujando el Logo en su totalidad
En este apartado nos disponemos a ver todo el código, para plasmar en su editor, y luego verlo en el navegador, si tienes problemas con IE te recomiendo revisar el siguiente link .
Primero vamos con la parte JavaScript que recomiendo (exijo) poner el script en la etiqueta <head> en lo posible estará lo más documentado posible:
<pre data-lang="js"><script language="javascript">
/*seleccionando la fuente principal y auxiliar junto con el valor del tamaño inicial */
var fontfamily = "65px 'Gill Sans Ultra Bold', sans-serif";
//valor de la escala inicial
var factorvalue = 1;
//declaracion de la variable principal - global
var spot;
//Funcion principal
function initiate(){
/*declaración de la variable y poniendola en contexto canvas 2D */
spot = document.getElementById('canvas').getContext('2d');
//estableciendo la fuente a dibujar con canvas
spot.font= fontfamily;
//salvando las coordenadas iniciales
spot.save();
//Invocando la funcion que dibuja
drawLogo();
}
//funcion que hace el trabajo sucio
function drawLogo(){
/* cantidad para ajustar las coordenadas para dibujar el fondo o escudo del logo. */
var offsety = 80;
//reniciar el estado de las coordenas
spot.restore();
//se utiliza para cuando le hacemos zoom al logo
spot.save();
//limpiando el canvas
spot.clearRect(0,0,600,400);
/*escalando horizontal y verticalmente los valores del dimensionamiento */
spot.scale(factorvalue, factorvalue);
//dibujando la palabra HTML
spot.fillText("HTML", 31,60);
//desplazando hacia abajo la forma de dibujar en pantalla
spot.translate(0, offsety);
//5 caras de color naranja
spot.fillStyle = "#E34C26";
//inciando path
spot.beginPath();
/* moviendo a la posición indicada: abajo a la izquierda */
spot.moveTo(39, 250);
spot.lineTo(17, 0);
spot.lineTo(262, 0);
spot.lineTo(239, 250);
spot.lineTo(139, 278);
spot.closePath();
//rellenar con el color indicado
spot.fill();
// parte naranja del fondo a mano derecha más ligero
//color oficial naranja oscuro
spot.fillStyle = "#F06529";
spot.beginPath();
spot.moveTo(139, 257);
spot.lineTo(220, 234);
spot.lineTo(239, 20);
spot.lineTo(139, 20);
spot.closePath();
spot.fill();
//Color gris, lado izquierdo del 5
spot.fillStyle = "#EBEBEB";
spot.beginPath();
spot.moveTo(139, 113);
spot.lineTo(98, 113);
spot.lineTo(96, 82);
spot.lineTo(139, 82);
spot.lineTo(139, 51);
spot.lineTo(62, 51);
spot.lineTo(70, 144);
spot.lineTo(139, 144);
spot.closePath();
spot.fill();
//regresando al punto medio del canvas
spot.beginPath();
spot.moveTo(139,193);
spot.lineTo(105,184);
spot.lineTo(103,159);
spot.lineTo(72, 159);
spot.lineTo(76, 207);
spot.lineTo(139, 225);
spot.closePath();
spot.fill();
//blanco, lado derecho del 5
spot.fillStyle="#FFFFF";
spot.beginPath();
spot.moveTo(139,113);
spot.lineTo(139,144);
spot.lineTo(177,144);
spot.lineTo(173, 184);
spot.lineTo(139,193);
spot.lineTo(139, 225);
spot.lineTo(202, 207);
spot.lineTo(210, 113);
spot.closePath();
spot.fill();
//moviéndose al punto medio del canvas
spot.beginPath();
spot.moveTo(139,51);
spot.lineTo(139,82);
spot.lineTo(213,82);
spot.lineTo(216,51);
spot.closePath();
spot.fill();
}</pre>
//funcion para dar escala al logo
function changescale(val){
factorvalue = val/100;
drawLogo();
}
Y la parte HTML5:
<canvas id="canvas" width="600" height="400"> su browser no soporta canvas que tristeza..!! </canvas></pre> <div> <h3>Porcentaje de Transformación de coordenadas</h3> <input id="slide" type="range" min="0" max="100" value="100" onChange="changescale(this.value)" step="10" /> </div>
El resultado es como la imagen siguiente; te dejo el código como referencia en GitHub.
Si te gusto el tutorial, esperamos que nos dejes tus comentarios.
