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