HTML5: pizarra con canvas y JavaScript

HTML5: pizarra con canvas y JavaScript

Etiquetas: canvas strokeStyle beginPath stroke lineTo

Una de las novedades de HTML5 es la etiqueta <canvas>. Esta etiqueta permite crear dinámicamente formas y elementos 2d. En este ejemplo, crearemos una pizarra sencilla con esta nueva etiqueta y algo de JavaScript.

La sintaxis para crear un objeto canvas, es la siguiente:

  1.  
  2.         <canvas id="pizarra" width="300px" height="200px"></canvas>

  3.  

Como vemos, especificamos un ancho, un alto, y un id ("pizarra") que utilizaremos para manipular el canvas desde JavaScript. El código JavaScript comentado sería este:

  1.  
  2. var pizarra_canvas
  3. var pizarra_context
  4.  
  5. /*
  6. 	Inicializamos la pizarra. 
  7. 	En primer lugar comprobamos si el navegador tiene soporte para canvas utilizando la 
  8. 	librería Modernizr. 
  9. 	Después guardamos referencia al canvas y definimos el color del trazo con el que vamos a dibujar. 
  10. 	Por último, añadimos listeners para los eventos "mousedown" y "mouseup", ya que cuando salten esos
  11. 	eventos tenemos que empezar / terminar de pintar
  12. */
  13.  
  14. function init(){
  15. 	if(!Modernizr.canvas){
  16. 		document.getElementById("contenedor_pizarra").style.display = "none";
  17. 	}else{
  18. 		document.getElementById("no_html5").style.display = "none";
  19. 		pizarra_canvas = document.getElementById("pizarra");
  20. 		pizarra_context = pizarra_canvas.getContext("2d");
  21. 		pizarra_context.strokeStyle = "#000";
  22. 		pizarra_canvas.addEventListener("mousedown",empezarPintar,false);
  23. 		pizarra_canvas.addEventListener("mouseup",terminarPintar,false);
  24. 	}
  25. }
  26.  
  27. /*
  28. 	empezarPintar(e)
  29. 	Al hacer mousedown sobre la pizarra, comenzamos un nuevo trazo, movemos el pincel hasta la 
  30. 	posición del ratón y añadimos un listener para el evento mousemove, para que con cada movimiento 
  31. 	del ratón se haga un nuevo trazo
  32. */
  33.  
  34.  
  35. function empezarPintar(e){
  36. 	pizarra_context.beginPath();
  37. 	pizarra_context.moveTo(e.clientX-pizarra_canvas.offsetLeft,e.clientY-pizarra_canvas.offsetTop);
  38. 	pizarra_canvas.addEventListener("mousemove",pintar,false)
  39. }
  40.  
  41. /*
  42. 	terminarPintar(e) se ejecuta al soltar el botón izquierdo, y elimina el listener para 
  43. 	mousemove
  44. */
  45.  
  46. function terminarPintar(e){
  47. 	pizarra_canvas.removeEventListener("mousemove",pintar,false);
  48. }
  49.  
  50. /*
  51. 	pintar(e) se ejecuta cada vez que movemos el ratón con el botón izquierdo pulsado.
  52. 	Con cada movimiento dibujamos una nueva linea hasta la posición actual del ratón en pantalla.
  53. */
  54.  
  55. function pintar(e) {
  56. 	pizarra_context.lineTo(e.clientX-pizarra_canvas.offsetLeft,e.clientY-pizarra_canvas.offsetTop);
  57. 	pizarra_context.stroke();
  58. }
  59.  
  60. /*
  61. 	borrar() vuelve a setear el ancho del canvas, lo que produce que se borren los trazos dibujados
  62. 	hasta ese momento.
  63. */
  64.  
  65. function borrar(){
  66. 	pizarra_canvas.width = pizarra_canvas.width;
  67. }
  68.  

Ver Ejemplo

.
Enlaces relacionados
Comentarios
    • Autor
    • Ibai
    Es posible guardar, de alguna forma, el dibujo y que en la próxima sesión (o desde otra máquina) se cargue?
    • Autor
    • gabriel
    no tengo ni idea de como implementar la pizarra, donde pongo el codigo javascript dentro del mismo html. lo he puesto asi y no me funciona
Dejar un comentario
Tu nombre (obligatorio):

E-mail (obligatorio, no se mostrará):

Web:

Comentario: