El elemento canvas es una nueva caracteristica de HTML 5, con este elemento podemos hacer graficos programados con la ayuda de Javascript y la API de Canvas, lo unico que necesitaremos es un editor de Texto … notepad++ en Windows … geany en Linux, por ejemplo y nuestro navegador favorito para ver los Resultados.
El ejemplo que traemos a continuacion es de una lluvia de particulas de colores creadas con simple codigo javascript y el poderoso elemento canvas. La funcionalidad de este ejemplo se basa en la funcion de crear circulos en canvas mezclado con funciones random en javascript para hacer un efecto divertido.
El codigo esta dividido en 2 archivos :
Archivo HTML : contiene las definiciones HTML de contenido y de apariencia como el CSS con la etiqueta style.
Archivo JS : Las funciones que crearan nuestro Maravilloso Efecto
Archivo HTML
<html>
<head>
<style>
canvas {
height : 500px;
width : 500px;
border : 2px black solid;
}
</style>
</head>
<body>
<h1>[Javascript] Lluvia de Particulas con Canvas HTML 5</h1>
<canvas id="micanvas">
</canvas>
<script src="efect.js"></script>
</body>
</html>
En el archivo html podemor ver que solo esta definido un H1, elemento canvas … es el simple dise~o ahora veamos el Javascript
Archivo JS
function drawCircle(posx,posy,size,color){
var canvas = document.getElementById("micanvas");
var context = canvas.getContext('2d');
context.beginPath();
context.fillStyle = color;
context.strokeStyle="black";
context.arc(posx, posy, size, 0, 2 * Math.PI, false);
context.fill();
context.stroke();
}
function MakeRandom(color){
posx = Math.floor(Math.random() * 600);
posy= Math.floor(Math.random() * 600);
size=Math.floor(Math.random() * 20);
if(posx>0||posy>0){
drawCircle(posx,posy,size,color);
}
}
function itsWork(){
MakeRandom("red");
MakeRandom("blue");
MakeRandom("yellow");
MakeRandom("lime");
MakeRandom("pink");
MakeRandom("violet");
MakeRandom("skyblue");
MakeRandom("white");
MakeRandom("silver");
MakeRandom("green");
MakeRandom("navy");
}
window.setInterval("itsWork()",10);
Vemos que en el archivo efect.js hay 3 funciones :
drawCircle : esta funcion se encarga de crear las particulas, estas se crean con la API de canvas.
MakeRandom : esta funcion se encarga de crear las posisiones aleatorias para que las particulas se posiciones en difererntes lugares .
itsWork : esta es la funcion que crea las particulas a partir de las funciones anteriores, vemos que el argumento que se le pasa a la funcion MakeRandom es un color y es el color de la particulas.
por ultimo tenemos la linea : window.setInterval(«itsWork»,10) y es la que se encarga de hacer la animacion cada 10ms(milisegundos).
Aqui esta el Ejemplo Funcionando
