Hoy vamos a explicar como pintar en Canvas, y las múltiples y creativas opciones de las que disponemos en HTML5:
Canvas es un elemento nuevo en HTML5, utilizado para crear gráficos de secuencias de comandos. Elemento Canvas se basa en la especificación WHATWG.
Con el sólo uso del HTML,resultaba un problema la creación de gráficos dinámicos en la página web. De hecho para pintar algo era necesario implementar algunas soluciones en CSS o usar plugins de terceros como Flash o Java. Con Canvas todo lo que necesitas es poner los elementos en la página y dibujar lo que deseáis con JScript.
Para poner el elemento Canvas en vuestra página sólo tenéis que añadir el código siguiente:
1canvas id='canvas'>/canvas>2
Eso porqué toda la magia reside en el JScript, con el que puedes hacer:
Herramientas de dibujo
- Rectángulos
- Arcos
- Elipses
- Líneas y trazos
- Curvas cuadráticas
Efectos
- Rellenos y trazos
- Sombras
- Degradados lineales y radiales
- Transparencia alfa
- Composición
Transformaciones
- Escala
- Rotación
- Traslación
- Transformación de la matriz
Y mucho más …
Vamos a ver como se construye una aplicación de dibujo simple.
El código HTML
Para este ejemplo el código HTML será muy simple, todo lo que necesitamos es un elemento canvas y un “sitio” para mostrar nuestro color seleccionado en RGB y en formato HEX:
1canvas width="600" height="440" id="canvas_picker">/canvas>2div id="hex">HEX: input type="text">/input>/div>3div id="rgb">RGB: input type="text">/input>/div>4
También tenèis que añadir JQuery a vuestra página ya que váis a utilizar algo de código jQuery.
El JavaScript
Lo primero que tenemos que hacer para conseguir que el lienzo y su contexto funciónen es escribir una línea de código:
1var canvas = document.getElementById('canvas_picker').getContext('2d');2
Ahora que tenemos el elemento canvas y su contexto, podemos empezar a establecer una imagen como fondo del canvas. Para ello es necesario crear un objeto ‘imagen’ y especificar su URL. Luego, tendremos que dibujar en el canvas:
1var img = new Image();2img.src = 'image.jpg';3$(img).load(function(){4 canvas.drawImage(img,0,0);5});6
Hasta aquí todo bien, ¿no?
Bueno, esta es la parte en la que tenemos que definir lo que pasa cuando se hace clic en el canvas. Para hacerlom, tendremos que que obtener la posición del cursor del usuario en el lienzo para ver dónde se hizo clic, así:
1$('#canvas_picker').click(function(event){2var x = event.pageX - this.offsetLeft;3var y = event.pageY - this.offsetTop;4
Con estas dos líneas de código se puede ver donde hizo clic el usuario y lo que estamos haciendo es conseguir las coordenadas en las que el usuario hace clic y luego restarlas en el desplazamiento de la imagen.
Eso nos dirá donde hizo clic el usuario con relación a la posición de la imagen. Nuestro siguiente paso es obtener los valores RGB del lugar en que hizo clic el usuario y para ello necesitamos utilizar la función getImageData y fijar las posiciones x e y del clic:
1var imgData = canvas.getImageData(x, y, 1, 1).data;2var R = imgData[0];3var G = imgData[1];4var B = imgData[2];5
Ahora tenemos estos valores almacenados dentro de las variables R, G y B, pero queremos mostrar esta información al usuario de una forma que pueda leerse fácilmente, por lo que tenemos que crear una variable de RGB que contenga estos tres valores separados por comas y luego presentarlo como el valor de uno de nuestros campos de entrada:
1var rgb = R + ',' + G + ',' + B;2 $('#rgb input').val(rgb);3});4
Y si lo probamos ahora ya tenemos un selector de color completamente funcional que recupera el valor RGB de cualquier lugar en que se haga clic pero, para hacer esto un poco mejor, podemos añadir una función de Javascripter que convierta los valores RGB en valores hexadecimales, la función es:
1function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}2function toHex(n) {3 n = parseInt(n,10);4 if (isNaN(n)) return "00";5 n = Math.max(0,Math.min(n,255));return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);6}7
Ahora que tenemos esta función todo lo que necesitamos hacer finalmente es presentar los valores hexadecimales realizando la función de nuestros valores RBG para que establezca el valor de la entrada con color HEX con un # antes y con la función ya existente. Es muy simple:
1// after declaring the RGB variable 2var hex = rgbToHex(R,G,B);3// after setting the RGB value4$('#hex input').val('#' + hex);5
El Código completo
1!DOCTYPE html>2html lang="en">3head>4meta charset="utf-8" />5title>Colorpicker demo/title>6script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">/script>7/head>8body>9canvas width="600" height="440" id="canvas_picker">/canvas>10div id="hex">HEX: input type="text">/input>/div>11div id="rgb">RGB: input type="text">/input>/div>12script type="text/javascript">13var canvas = document.getElementById('canvas_picker').getContext('2d');14// create an image object and get it's source15var img = new Image();16img.src = 'image.jpg';17// copy the image to the canvas18$(img).load(function(){19canvas.drawImage(img,0,0);20});21// http://www.javascripter.net/faq/rgbtohex.htm22function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}23function toHex(n) {24n = parseInt(n,10);25if (isNaN(n)) return "00";26n = Math.max(0,Math.min(n,255));27return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);28}29$('#canvas_picker').click(function(event){30// getting user coordinates31var x = event.pageX - this.offsetLeft;32var y = event.pageY - this.offsetTop;33// getting image data and RGB values34var img_data = canvas.getImageData(x, y, 1, 1).data;35var R = img_data[0];36var G = img_data[1];37var B = img_data[2]; var rgb = R + ',' + G + ',' + B;38// convert RGB to HEX39var hex = rgbToHex(R,G,B);40// making the color the value of the input41$('#rgb input').val(rgb);42$('#hex input').val('#' + hex);43});44/script>45/body>46/html>47
Conclusión
Espero que con este tutorial te hayas dado cuenta del potencial que existe en la creación de aplicaciones con canvas. Hay algunas aplicaciones mucho más avanzadas, la gente está incluso haciendo juegos con canvas, así que es una cosa a explorar, ya que se pueden crear cosas increíbles con ello.
eres emprendedor dale clic aquí