Antes que nada tenemos que ver que necesitamos para poder dibujar, JavaScript y una etiqueta canvas, con un id, ancho y alto definidos, no estaría mal, definirle un borde y saber cuál es el área de nuestro documento HTML en donde estamos dibujando.
Código Javascript :
<canvas id="areaDibujoA" width="200" height="200">Tú navegador no soportar canvas</canvas>
Ahora con JS dibujamos desde figuras sencillas como un cuadrado, observa los comentarios del siguiente código:
Código Javascript :
<script type="text/javascript" charset="utf-8">
window.onload = function (){
//Definimos el canvas donde vamos a dibujar
var creandoDibujoA = document.getElementById('areaDibujoA');
//Activamos al función 2d para la variable donde vamos a dibujar
var dibujandoA = creandoDibujoA.getContext('2d');
//Definimos las carateristicas del elemento color, tamaño del borde y color de este
dibujandoA.lineWidth = 5;
dibujandoA.strokeStyle = "#0099FF";
dibujandoA.fillStyle = "#FFFF99";
//Transladamos al elemento a la mitad del canvas,
//esto debido a que toma la esquina superior izquierda como las coordenas 0,0
dibujandoA.translate(100, 100);
dibujandoA.rotate(0);
//Iniciamos un nuevo path donde dibujaremos
dibujandoA.beginPath();
//Ahora el centro del canvas posee las coordenadas 0,0, creo que es mas coomodo así
dibujandoA.moveTo( 0,0 );
dibujandoA.fillRect(0, 0, 50, 50);
//aplicamos las caracteristicas color y tamaño
dibujandoA.fill();
dibujandoA.stroke();
//cerramos el path
dibujandoA.closePath();
}
</script>Mira funcionando el ejemplo:
se pueden usar líneas para hacer figuras más complejas:
El código fuente es:
Código Javascript :
<canvas id="areaDibujoB" width="200" height="200">Tú navegador no soportar canvas</canvas>
<script type="text/javascript" charset="utf-8">
window.onload = function (){
//Definimos el canvas donde vamos a dibujar
var creandoDibujoB = document.getElementById('areaDibujoB');
//Activamos al función 2d para la variable donde vamos a dibujar
var dibujandoB = creandoDibujoB.getContext('2d');
//Definimos las carateristicas del elemento color, tamaño del borde y color de este/
dibujandoB.lineWidth = 2;
dibujandoB.strokeStyle = "#0099FF";
dibujandoB.fillStyle = "#FFFF99";
//Transladamos al elemento a la mitad del canvas,
//esto debido a que toma la esquina superior izquierda como las coordenas 0,0
dibujandoB.translate(100, 100);
dibujandoB.rotate(0);
//Iniciamos un nuevo path donde dibujaremos
dibujandoB.beginPath();
//Ahora el centro del canvas posee las coordenadas 0,0, creo que es mas coomodo así
dibujandoB.moveTo( 0,0 );
//Dibujamos una linea
dibujandoB.lineTo( 50,0 );
//Un arco
dibujandoB.arc(0,0,50,0,1.5*Math.PI,true);
//Otra linea para cerrar la figura
dibujandoB.lineTo( 0,0 );
//aplicamos las caracteristicas color y tamaño
dibujandoB.fill();
//con este dibujamos las lineas
dibujandoB.stroke();
//cerramos el path
dibujandoB.closePath();
}
</script>Las librerías de JS para dibujar en canvas nos pueden facilitar mucho el trabajo, como es el caso de jCanvas, donde, desde el inicio de su página web muestra lo fácil que es el dibujo usando JavaScript, mira el ejemplo:
Código Javascript :
<canvas id="areaDibujoC" width="200" height="200">Tú navegador no soportar canvas</canvas>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jcanvas.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function (){
//Con esta funcion dibujamos un circulo, definicmos, color, posicion y tamaño
$("#areaDibujoC").drawArc({
fillStyle: "black",
x: 100, y: 100,
radius: 25
});
});
</script>con un código más simple, pero necesitamos usar la librería jquery para que funcione. Otro punto es el hecho de no poder usas eventos, sin embargo, una buena librería si lo único que se quiere es dibujar.
Existen otras librerías que nos permiten usar eventos en los diferentes elementos que dibujemos en nuestro canvas. Tal es el caso de JcanvaScript, observa el ejemplo:
Código Javascript :
<canvas id="areaDibujoD" width="200" height="200">Tú navegador no soportar canvas</canvas>
<script type="text/javascript" src="jCanvaScript.min.js"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function (){
//definimos el canvas donde vamos a dibujar, le ponemos el 25 para que funcionen los eventos
jc.start('areaDibujoD',25);
//dibujamos los elementos
//un circulo
jc.circle(100,100,50,'rgba(255,0,0,0.5)',1)
//ahora su evento, cuando se le click a circulo cambiará de color
.click(function(){
this.color('#00ff00');
});
//Podemos dibujar más figuras
//un rectangulo rotado
jc.rect(150,40,50,60,1)
//aplicar funciones de transformación,
//rotado desde el centro
.rotate(30,'center')
//ahora su evento, cuando se le click rotará
.click(function(){
this.rotate(50,'center')
});
//volvemos usar esta función para redibujar y finalizar el canvas
jc.start('areaDibujoD',25);
}
</script>creo, es muy entendible, creamos la figura e inmediatamente le asignamos su evento, esta librería tiene además de los eventos mousedown y mouseup, dobleclick, solo que tiene un pequeña desventaja, los eventos parecen funcionar solo para figuras básicas, y para poder crear figuras complejas es algo complicado. Sin embargo muy útil y muy simple para eventos con figuras básicas.
Una forma de resolver el problema con las figuras complejas y usar eventos en ellas es el uso de una librería llamada kineticjs, aquí un tutorial de cómo usarlo. Abajo un ejemplo:
Código Javascript :
<canvas id="areaDibujoE" width="200" height="200">Tú navegador no soportar canvas</canvas>
<script type="text/javascript" src="kinetic.js"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function (){
//Definimos un nuevo kinectic para usar la libreria
kin = new Kinetic("areaDibujoE", "2d");
kin.setDrawStage(function(){
//Limpiamos el canvas
kin.clear();
//
var dibujandoE = kin.getContext();
// inciamos una nueva region para dibujar
kin.beginRegion();
//Definimos las carateristicas del elemento color, tamaño del borde y color de este/
dibujandoE.lineWidth = 2;
dibujandoE.strokeStyle = "#0099FF";
dibujandoE.fillStyle = "#FFFF99";
//Iniciamos un nuevo path donde dibujaremos
dibujandoE.beginPath();
//Ahora el centro del canvas posee las coordenadas 0,0, creo que es mas coomodo así
dibujandoE.moveTo( 100,100 );
//Dibujamos una linea
dibujandoE.lineTo( 150,100 );
//Un arco
dibujandoE.arc(100,100,50,0,1.5*Math.PI,true);
//Otra linea para cerrar la figura
dibujandoE.lineTo( 100,100 );
//aplicamos las caracteristicas color y tamaño
dibujandoE.fill();
//con este dibujamos las lineas
dibujandoE.stroke();
//cerramos el path
dibujandoE.closePath();
//aderimos un evento onmousedown
kin.addRegionEventListener("onmousedown", function(){
alert("Click");
});
//cerramos la region
kin.closeRegion();
});
}
</script>Como te habrás dado cuenta, para el dibujo usa el primer método que mostré en este post, sin embargo esta página te da ejemplos y te explica como aprender a dibujar usando este método, mira este tutorial HTML5 Canvas Arc Tutorial.Un detalle que tiene esta librería es que el evento mousedown que ocupa no funciona en pantallas táctiles.
Para resolver el uso del click en pantallas táctiles existe una librería que permite figuras complejas, con eventos y que funciona con este tipo de pantallas, Gury, una de las características que me gustaron de esta librería es que no necesitas definir un canvas para poder usarla, solo un div, mira el ejemplo:
Código Javascript :
<div id="areaDibujoF" width="200" height="200"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="gury.js"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function (){
//Creamos el canvas y le asignamos un tamaño
$g().size(200, 200)
//Aderimos el elemento a dibujar, junto con su nombre de instancia
.add('dibujoFa',function(dibujandoFa) {
//Definimos las carateristicas del elemento
dibujandoFa.lineWidth = 2;
dibujandoFa.strokeStyle = "#0099FF";
dibujandoFa.fillStyle = "#FFFF99";
//Guardamos para despues reestablecer los valores
dibujandoFa.save();
//Transladamos al elemento a la mitad del canvas
dibujandoFa.translate(100, 100);
dibujandoFa.rotate(1.2*Math.PI);
//Iniciamos un nuevo path donde dibujaremos
dibujandoFa.beginPath();
//Comenzamos desde el centro
dibujandoFa.moveTo( 0,0 );
dibujandoFa.lineTo( 50,0 );
dibujandoFa.arc(0,0,50,0,1.5*Math.PI,true);
dibujandoFa.lineTo( 0,0 );
//aplicamos las caracteristicas color y tamaño
dibujandoFa.fill();
dibujandoFa.stroke();
//cerramos el path
dibujandoFa.closePath();
//restauramos los valores salvados
dibujandoFa.restore();
})
//Aderimos el elemento a dibujar, junto con su nombre de instancia
.add('dibujoFb',function(dibujandoFb) {
//Definimos las carateristicas del elemento
dibujandoFb.lineWidth = 2;
dibujandoFb.strokeStyle = "#3399FF";
dibujandoFb.fillStyle = "#33FF99";
//Guardamos para despues reestablecer los valores
dibujandoFb.save();
//Transladamos al elemento a la mitad del canvas
dibujandoFb.translate(100, 100);
dibujandoFb.rotate(0.2*Math.PI);
//Iniciamos un nuevo path donde dibujaremos
dibujandoFb.beginPath();
//Comenzamos desde el centro
dibujandoFb.moveTo( 0,0 );
dibujandoFb.lineTo( 50,0 );
dibujandoFb.arc(0,0,50,0,1.8*Math.PI,true);
dibujandoFb.lineTo( 0,0 );
//aplicamos las caracteristicas color y tamaño
dibujandoFb.fill();
dibujandoFb.stroke();
//cerramos el path
dibujandoFb.closePath();
//restauramos los valores salvados
dibujandoFb.restore();
})
//Aderimos los eventos
.click('dibujoFa', function(e) {
alert('Click en la Figura 1');
})
.click('dibujoFb', function(e) {
alert('Click en la Figura 2');
})
//Ponemos el dibujo(s) en el div notese que es en el DIV no en un canvas
.place("#areaDibujoF").draw();
}
</script>Si bien se necesita de la librería Jquery y de usar el primer método, es muy buena esta librería para usar figuras complejas, con eventos y que funcione en pantallas táctiles, aún se encuentra en versión alpha por lo que es probable que encuentren algunos problemillas, como por ejemplo si se descargan la versión que publica el autor y usan el evento click les dirá que tiene un error, para corregirlo descarguen la versión completa, de la siguiente página https://github.com/rsandor/gury/blob/master/demos/tags.html, denle click en download y luego de descomprimir el archivo gury.js,
ábranlo, váyanse a la línea 350 y cambien ob por object,
de no cambiarlo la consola de JavaScript (use la de google Chrome, me parece muy buena, pero esa es otra historia), mostrará un error.
Espero que este post les sea de ayuda, y cualquier duda, no duden en preguntar, gracias por su visita.
Pueden ver el articulo original desde mi pagina web Dibujando en Canvas con JS HTML5, donde podrán probar ver los ejemplos.
