Crear aplicaciones de lienzo es lo nuevo, incluso podemos crear juegos con él, es compatible con todos los principales navegadores, tanto de escritorio como móviles, y eso lo convierte en una solución más viable que usar Flash.
En este tutorial vamos a usar el elemento canvas para crear un selector de color simple que no requiere Flash, todo lo que necesita es un editor de texto y un navegador.
Antes de comenzar, eche un vistazo a lo que construiremos aquí. También puedes descargar los archivos fuente aquí. Tenga en cuenta que si va a probar la demostración localmente, necesitará usar un navegador que no sea Chrome; El modelo de seguridad de Chrome significa que el script solo funcionará en línea.
Para este ejemplo, el HTML será muy mínimo, todo lo que necesitamos para que el selector de color funcione es un elemento de lienzo y un lugar para mostrar nuestro color seleccionado en RGB y en formatos HEX, así que todo lo que necesitamos es esto:
HEX: RGB: Como usaremos una imagen de fondo con la paleta de colores, hice que mi lienzo tenga el ancho y el alto de esa imagen y los valores para el color seleccionado aparecerán en las entradas para una selección más fácil.
También debe agregar jQuery a su página, ya que utilizaremos algún código jQuery.
Lo primero que tenemos que hacer para que el selector de color funcione es obtener el lienzo y su contexto, y para hacerlo, todo lo que necesitamos es una línea de código, como esta:
var canvas = document.getElementById('canvas_picker').getContext('2d');Ahora que tenemos el elemento canvas y su contexto, podemos comenzar configurando la imagen como fondo del lienzo. Para hacer esto, necesitamos crear un objeto de imagen y hacer que su fuente sea la URL de la imagen. Cuando esta imagen se haya cargado, necesitamos dibujarla en el lienzo:
var img = new Image();img.src = 'image.jpg';$(img).load(function(){canvas.drawImage(img,0,0);});Hasta aquí todo bien, no ?
Bueno, esta es la parte donde necesitamos definir qué sucede cuando haces clic en algún lugar del lienzo, y si lo piensas, primero necesitas obtener la posición del cursor del usuario en el lienzo para ver dónde hicieron clic, así:
$('#canvas_picker').click(function(event){var x = event.pageX - this.offsetLeft;var y = event.pageY - this.offsetTop;Con estas dos líneas de código, podemos ver dónde hizo clic el usuario y lo que estamos haciendo es obtener los cordinates de donde hizo clic el usuario y luego restar el desplazamiento del lienzo. Eso nos indicará dónde hizo clic el usuario en relación con la posición del lienzo.
Nuestro siguiente paso es obtener los valores RGB del lugar en el que el usuario hizo clic y para hacerlo necesitamos que usemos la función getImageData y adjuntemos la posición xey del clic:
var imgData = canvas.getImageData(x, y, 1, 1).data;var R = imgData[0];var G = imgData[1];var B = imgData[2];Ahora tenemos estos valores almacenados dentro de las variables R, G y B, pero queremos mostrar esta información al usuario de manera que puedan leerla fácilmente, por lo que debemos crear una variable RGB que contenga estos tres valores separados por comas y luego Presente esto como el valor de uno de nuestros campos de entrada:
var rgb = R + ',' + G + ',' + B;$('#rgb input').val(rgb);});Y si lo prueba ahora, ya tiene un selector de color completamente funcional que recupera el valor RGB de cualquier lugar donde haga clic, pero para hacerlo un poco mejor, podemos agregar una función de Javascripter eso convierte los valores RGB a valores HEX; la función es:
function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)}function toHex(n) {n = parseInt(n,10);if (isNaN(n)) return "00";n = Math.max(0,Math.min(n,255));return "0123456789ABCDEF".charAt((n-n%16)/16) + "0123456789ABCDEF".charAt(n%16);}Ahora que tenemos esta función, todo lo que necesitamos hacer para presentar los valores HEX es realizar la función con nuestros valores RBG y luego establecer el valor de la entrada como color HEX con un # antes y con la función ya en su lugar. es bastante simple:
// after declaring the RGB variablevar hex = rgbToHex(R,G,B);// after setting the RGB value$('#hex input').val('#' + hex);Colorpicker demo HEX: RGB: Espero que con este tutorial te hayas dado cuenta del potencial que hay en crear aplicaciones con canvas. Hay muchas más aplicaciones avanzadas, la gente incluso hace juegos con lienzos, así que es algo que se debe explorar, ya que se pueden construir cosas increíbles.
¿Qué otros usos ha encontrado para Canvas? ¿Para qué te gustaría poder usarlo? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen del selector de color a través de Shutterstock.