Con HTML5 ganando popularidad, este tutorial describe lo que en realidad es sólo la punta del iceberg que es el diseño interactivo. En este tutorial voy a ir por el desarrollo de banners dinámicos, y generativa para darle a su sitio web que poco más de wow!
Si usted está interesado en leer más sobre la especificación de HTML 5, este es un gran recurso:
DiveIntoHTML5 byMarkPilgrimHTMLEl formato HTML es muy sencillo, ya que vamos a hacer todo el trabajo con JavaScript, en el elemento canvas:
<canvas id="banner"></canvas>
JAVASCRIPTComo era de esperar, sera JavaScript el que este haciendo todo el trabajo pesado aquí. Pero, ante todo, tendremos que comprobar si los usuarios están usando un navegador moderno que soporte el elemento canvas. Si no está apoyado, mostrará lo siguiente: una imagen estática. Vamos a usar Modernizr para comprobar esto.
VariablesVamos a empezar definiendo algunas variables:
//Las palabras que se escribiran en el banner.
var keyword = "Bienvenid@s",
canvas, context,
bgCanvas, bgContext,
density = 13,
particles = [],
colour = '#fff0a4',
mouse = { x:0, y:0 },
isDrawing = false,
canvasW, canvasH;
Una pequeña explicación: La palabra clave aquí va a ser la palabra que desea mostrar en el banner. El canvas, es una variable que contendrá el elemento canvas de HTML. Este será asignado después. El contexto es lo que nos permite dibujar y escribir en el canvas. La variable de la densidad tiene el número de píxeles que queremos tener (tanto horizontal como verticalmente) entre cada partícula del banner. En la matriz de partículas se almacenan todas las partículas y sus respectivos ajustes. La variable color es el color que cada partícula tendrá. Por último, la variable isDrawing va a hacernos saber si estamos haciendo hover sobre el banner, y el canvasW y canvasH son la anchura del lienzo y la altura respectivamente.
Configurando el bannerEl primer paso es llamar a la función de recarga, y también vamos a pedir a tamaño de la ventana:
this.initialize = function( canvas_id ) {
reload( canvas_id );
window.onresize = function(event) {
reload( canvas_id );En la función de recarga se inicializa el canvas, el contexto y establecemos las medidas respectivas. Entonces llamamos las funciones prepare, setupParticles y draw.
var reload = function( canvas_id ) {
canvas = document.getElementById( canvas_id );
if ( !window.HTMLCanvasElement ) return false;
context = canvas.getContext('2d');
canvasW = window.innerWidth;
canvasH = 300;
canvas.width = canvasW;
canvas.height = canvasH;
bgCanvas = document.createElement('canvas');
bgContext = bgCanvas.getContext('2d');
bgCanvas.width = canvasW;
bgCanvas.height = canvasH;
prepare();
setupParticles();
draw();Lo primero a destacar aquí, es que la función toma una variable de cadena, que debe coincidir con el ID de elemento en el código HTML. En nuestro caso, que pasaría "canvas-banner".
Como puedes ver, ambos, el
ncanvas de fondo y el canvas principal se establece en el mismo tamaño. Vamos a entrar aqui para ver por qué estamos utilizando dos elementos canvas en la siguiente sección.
El canvas de fondoOk, ahora voy dar algunas explicaciones: La razón por la cual tenemos dos canvas aquí, es más o menos el núcleo de estos banners. El canvas de fondo es donde se va a imprimir el texto o imágenes. Posteriormente, se analizará a través de los datos de la imagen (píxel por píxel) del canvas. Si nos encontramos con un píxel negro sabremos que nos hemos dibujado en este lugar, y por lo tanto, va a crear una partícula en su lugar.
var prepare = function() {
//Elegimos la funte y el tamaño
bgContext.font = "300px 'Jockey One'";
//Ahora llenamos la palabra clave en el texto del canvas
bgContext.fillText(keyword, ( canvasW / 2 ) - ( Math.round( bgContext.measureText(keyword).width/2 )) , 260 );El comando fillText arriba, toma tres parámetros: el primero es el texto para escribir, la segunda y la tercera es la "x" y "y" respectivamente. A continuación, vamos a crear nuestras partículas. Esto pronto se elaborará en el canvas principal, pero por ahora, nos limitaremos a almacenarlos en nuestra gama de partículas:
var setupParticles = function() {
particles = [];
//Declaramos nuestras variables locales
var imageData, image_Data,
pixel,
width = 0,
i = 0,
slide = false;
//tomamos el image - data - from (0,0) a los bordes del canvas
imageData = bgContext.getImageData( 0, 0, canvasW, canvasH );
image_Data= imageData.data;
for( var height = 0; height ++i;
slide = ((i % 2) == 0);
width = 0;
if (slide == true) {
width += 6;
}
//Luego Iterar horizontalmente sobre los datos de imagen
for( width; width //Obtenemos el pixel situado en nuestra iteración actual.
pixel = image_Data[ ( ( width + ( height * canvasW )) * 4 ) - 1 ];
//El pixel se dibuja
if( pixel == 255 ) {
//añadimos coordenadas y colores a nuestro array de particulas.
particles.push({
colour : colour,
x : width,
y : heightSí, eso es una gran parte del código, voy a ir a las partes difíciles ahora. En realidad, todo lo que estamos haciendo es recorrer cada pixel enésimo, donde n es el conjunto de la densidad en la salida. getImageData toma cuatro valores, el "X" y "Y" de la esquina superior izquierda, así como para la parte inferior derecha. En nuestro caso, le pasamos dos ceros a la izquierda (parte superior) y la anchura y altura del canvas, que son las coordenadas de la parte inferior derecha. Se devuelve una lista muy grande, que contiene los datos de color de cada píxel en el lienzo. ¿Por qué estamos multiplicando esta por cuatro? Debido a que dentro de esta lista, cada píxel está representado por cuatro valores, rojo, verde, azul y un valor de alfa. Por defecto, todos los ImageData del canvas contienen, es una larga lista de ceros - haciendo uso de este canvas (en nuestro caso, el uso fillText), los píxeles ahora contienen los datos correctos de color. Finalmente, han empujado a la coordenadas X e Y en un diccionario simple, que ahora vamos a usar para dibujar nuestro banner.
Dibujando el bannerEn este sentido, finalmente, podemos unir todo. Con nuestra lista de posiciones "X" y "Y", almacenados en la matriz de partículas, podemos dibujar el banner.
var draw = function() {
context.clearRect( 0, 0, canvasW, canvasH );
var dx, dy, sqrDist,
scale = 1;
for ( var i = 0, len = particles.length; i ...
context.beginPath();
context.moveTo( x, y - height / 2 );
context.lineTo( x + width / 2, y - height / 4 );
context.lineTo( x + width / 2, y + height / 4 );
context.lineTo( x, y + height / 2 );
context.lineTo( x - width / 2, y + height / 4 );
context.lineTo( x - width / 2, y - height / 4 );
context.lineTo( x, y - height / 2 );
context.closePath();
context.fill();nnvamos a recorrer a través de cada una de las partículas que previamente se almacenaron para establecer el color y para dibujar una forma en el punto (x, y). Con eso, tenemos un banner estático muy simple ... ahora viene la parte divertida, vamos a añadir un poco de interactividad.
añadiendo interactividadvar mouse = {x:0, y:0, o: false}La variable del ratón se actualizará por dos funciones, una de seguimiento del movimiento, y un seguimiento de si el ratón ha dejado el elemento de tela:
var MouseMove = function( e ) {
mouse.x = e.offsetX || ( e.layerX - canvas.offsetLeft );
mouse.y = e.offsetY || ( e.layerY - canvas.offsetTop );
if( !isDrawing ) {
isDrawing = true;
drawTimeout = setTimeout( function() {
draw();
isDrawing = false;
}, 60);
}
};
var MouseOut = function(e) {
isDrawing = false;
clearTimeout( drawTimeout );
draw();Con el fin de hacer que funcione, también es necesario unir los eventos de JavaScript a nuestro elemento canvas. Esto vendra dentro de la función de recarga.
canvas.addEventListener('mousemove', MouseMove, false);
canvas.addEventListener('mouseout', MouseOut, false);Ahora que podemos realizar un seguimiento del ratón, tenemos que cambiar nuestra función de dibujo un poco, sobre la base de cómo queremos interactuar con el ratón.
var p = particles[i];
dx = p.x - mouse.x;
dy = p.y - mouse.y;
// Distancia del mouse a las particulas
sqrDist = Math.sqrt( dx * dx + dy * dy );
( isDrawing ) ? scale = Math.max( Math.min( 3 - ( sqrDist / 10 ), 10 ), 1 ) : scale = 1;
var width = density / scale - 4,
height = density,
x = p.x,
y = p.y;
context.fillStyle = p.colour;
Por encima, se calcula la distancia entre la partícula de corriente y el ratón. A continuación, se actualiza la escala variable a caer entre 1 (es decir, sin escala) y la distancia entre el ratón y la partícula (pero no mayor que 10). Todo lo que queda ahora, es decirle al canvas que dibuje a intervalos regulares, en lugar de una sola vez al comienzo. para no hacer esto demasiado complicado yo sólo voy a mantenerlo simple y uso setTimeouts cuando el usuario hace hover sobre el banner - pero si usted está interesado en buscar más en las animaciones del canvas, la función que se busca es requestAnimationFrame
Vamos a agregar algun colorTenemos un banner limpio de trabajo, por qué no añadir un poco de color. Afortunadamente, ya hemos hecho la mayor parte del trabajo aquí, sólo tenemos que cambiar 2 líneas.
//Una variable para guardar cada uno de los colores que vamos a usar
var colors = ['#fff0a4', '#ffe98f', '#ffcf52', '#fbad1d', '#c48d1c'];
//Cuando estamos creando la particula, asignamos un color para esta lista
color: colors[Math.floor(Math.random() * colors.length)],
Y ahí lo tenemos! Una banner único, generativo y colorido, hecho especialmente para usted. Eche un vistazo a través de las versiones parciales del demo para ver algunos ejemplos de otros, que usted puede hacer.
Resultado: Ver Archivos: Descargar 
