Pizarra con Canvas y HTML5

Pizarra con Canvas y HTML5

En este ejemplo voy a crear una pizarra mediante Canvas para poder dibujar lo que quiera.

A esta pizarra le voy a ir añadiendo otras herramientas y características en futuras entradas, la intención es hacerla compatible con todos los navegadores y adaptarla para aplicaciones de iOS.

Será mi primer experimento con Canvas + iOS.

Por ahora únicamente la he probado en Chrome 19.

Algunas de las herramientas que tengo en mente son la posibilidad de cambiar de color al dibujar, el grosor del trazo, borrar todo lo que haya en la pantalla, guardar la imagen y alguna más que se me vaya ocurriendo sobre la marcha.

No voy a escribir la estructura HTML5 básica, pasaré directamente a las funciones JavaScript.

Nos ponemos con el tema.

Código para transformar mi lienzo en una pizarra

Para esto voy a crear cuatro funciones JavaScript, se llamarán comenzar(), pulsaRaton(), levantaRaton() y mueveRaton()

– A la primera función la llamaré desde mi < body onload=”comenzar()”>.

– Las demás funciones iran haciendo su trabajo una vez escuchemos los eventos medianteaddEventListener.

Función comenzar()

Le pasamos el ID de nuestro Canvas, utilizamos el método getContext y dejamos todo preparado para empezar a escuchar los eventos.

function comenzar(){
     lienzo = document.getElementById('canvas');
     ctx = lienzo.getContext('2d');
//Dejamos todo preparado para escuchar los eventos
     document.addEventListener('mousedown',pulsaRaton,false);
     document.addEventListener('mousemove',mueveRaton,false);
     document.addEventListener('mouseup',levantaRaton,false);
}

Función pulsarRaton()

Necesitamos tener una variable que nos avise cuándo estamos dibujando, para esto pondremos la variable estoyDibujando = true, le indicaremos que vamos a dibujar e iremos averiguando conmoveTo las coordenadas por las que va pasando el ratón.

function pulsaRaton(capturo){
     estoyDibujando = true;
//Indico que vamos a dibujar
     ctx.beginPath();
//Averiguo las coordenadas X e Y por dónde va pasando el ratón
     ctx.moveTo(capturo.clientX,capturo.clientY);
}

Función mueveRaton()

Mientras esté moviendo el ratón pueden pasar dos cosas, que tenga que dibujar  o que no. Averiguaré que tengo que hacer con el valor de mi variable estoyDibujando, que se va a poner atrue siempre que esté el ratón pulsado y pasará a false cuando suelte el ratón.

– capturo es quién va a indicarnos en qué coordenadas tenemos que dibujar.

function mueveRaton(capturo){
     if(estoyDibujando){
//indicamos el color de la línea
         ctx.strokeStyle='#000';
//Por dónde vamos dibujando
         ctx.lineTo(capturo.clientX,capturo.clientY);
         ctx.stroke();
     }
}

Función levantaRaton()

En esta función lo único que tenemos que indicar es que hemos terminado de dibujar y poner nuestra variable estoyDibujando = false, para así poder mover el ratón sin que dibuje.

function levantaRaton(capturo){
//Indico que termino el dibujo
     ctx.closePath();
     estoyDibujando = false;
}

Este es el CSS que tengo añadido en mi archivo, únicamente me aseguro que el margin y el padding estén a 0 y le añado borde y sombra al Canvas.

< style type="text/css">
body{
     margin:0px;
     padding:0px;
}
#canvas{
     border: 1px solid  #000;
     box-shadow: 2px 2px 10px #333;
}
< /style>

Desde aquí puedes ver y descargar el ejemplo

Ve al ejemplo para dibujar en una pizarra con Canvas y HTML5 y mira su código fuente, está todo incluido en el archivo.

Bueno, espero que te sea de ayuda!

Fuente:untitled.es

Un comentario en “Pizarra con Canvas y HTML5

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s