Cómo Crear Un Selector de Color con Html5 Canvas

HTML5: Dibujando con Canvas

by admin admin Date: 11-04-2013


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:

 

<canvas id='canvas'></canvas>

 

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:

<canvas width="600" height="440" id="canvas_picker"></canvas>
<div id="hex">HEX: <input type="text"></input></div>
<div id="rgb">RGB: <input type="text"></input></div>

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:

var canvas = document.getElementById('canvas_picker').getContext('2d');

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:

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 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í:

$('#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 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:

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 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:

var rgb = R + ',' + G + ',' + B;
  $('#rgb input').val(rgb);
});

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:

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 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:

// after declaring the RGB variable   
var hex = rgbToHex(R,G,B);
// after setting the RGB value
$('#hex input').val('#' + hex);

El Código completo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Colorpicker demo</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>

<canvas width="600" height="440" id="canvas_picker"></canvas>
<div id="hex">HEX: <input type="text"></input></div>
<div id="rgb">RGB: <input type="text"></input></div>

<script type="text/javascript">
	var canvas = document.getElementById('canvas_picker').getContext('2d');

	// create an image object and get it's source
	var img = new Image();
	img.src = 'image.jpg';

	// copy the image to the canvas
	$(img).load(function(){
	  canvas.drawImage(img,0,0);
	});

	// http://www.javascripter.net/faq/rgbtohex.htm
	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);
	}
	$('#canvas_picker').click(function(event){
	  // getting user coordinates
	  var x = event.pageX - this.offsetLeft;
	  var y = event.pageY - this.offsetTop;
	  // getting image data and RGB values
	  var img_data = canvas.getImageData(x, y, 1, 1).data;
	  var R = img_data[0];
	  var G = img_data[1];
	  var B = img_data[2];  var rgb = R + ',' + G + ',' + B;
	  // convert RGB to HEX
	  var hex = rgbToHex(R,G,B);
	  // making the color the value of the input
	  $('#rgb input').val(rgb);
	  $('#hex input').val('#' + hex);
	});
</script>

</body>
</html>

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.

 
by admin admin Date: 11-04-2013 visitas : 4889