Hace un poco de tiempo publique un articulo sobre lluvia de particulas con canvas , aqui vamos a usar parte de ese codigo pero para hacer un circulo … que nos servira para varios post mas adelante.
Para iniciar, lo primero que debemos hacer es incluir el elemento canvas en el documento html :
<canvas id="micanvas" style="width : 400px ; height : 200px ; border : 1px black solid ;"> </canvas>
Una vez hecho esto seguiremos con el codigo javascript, notar que la etiqueta de script debera ir despues de la creacion del elemento canvas para poder manejarlo de manera correcta.
Despues debemos selccionar el elemento para poder manipularlo, esto lo logramos con la funcion document.querySelector , y despues obtendremos el contexto para poder dibujar sobre el lienzo canvas. para esto usamos la primera linea del siguiente codigo :
var context = document.querySelector("#micanvas").getContext('2d');
context.beginPath();
context.fillStyle = "red";
context.strokeStyle="black";
context.arc(50, 50, 5, 0, 2 * Math.PI, false);
context.fill();
context.stroke();
context.closePath();
La segunda linea es el inicio del trazo … context.beginPath().
context.fillStyle , es el color del cual rellenaremos nuestro elemento debujado, en este caso nuestro circulo.
context.strokeStyle, es el color del borde o contorno de nuestro circulo.
context.arc(posicionx, posiciony, radio, inicio, 2 * Math.PI, respectoalreloj) , esta es la funcion que nos dijuja el circulo, entre parentesis lleva 6 argumento muy importantes para el trazo del circulo :
posicionx : la cordenada en x del dibujo con respecto al elemento canvas.
posiciony : la cordenada en y del dibujo con respecto al elemento canvas.
radio : el la distancia del centro del circulo al contorno.
inicio : normalmente 0, en el caso de hacer un circulo completo, para otros uso se usan fracciones de PI.
respectoalreloj : normalmente false, es la forma o el orden en que se dibujara el circulo, respecto a las manecillas del reloj o inversamente a las manecillas.
context.fill() : rellena el color del circulo una vez definido que color en fillStyle y creado el circulo.
context.stroke() : pinta el contorno del circulo del color definido en strokeStyle.
context.closePath() : cerramos el trazo…
Es muy importante no olvidar ningin paso para que todo funcione bien.
