Dibujando un círculo en un canvas en HTML5.

5 de noviembre de 2016

Libro electrónico gratis:<br>Marco Polo los viajes de marco polo
Libro electrónico gratis:
Marco Polo
los viajes de marco polo
Libro electrónico gratis:<br>Jean-Jacques Rousseau Emilio o La educación
Libro electrónico gratis:
Jean-Jacques Rousseau
Emilio o La educación
Libro electrónico gratis:<br>Eduardo Saavedra Estudio sobre la invasión de los árabes en España
Libro electrónico gratis:
Eduardo Saavedra
Estudio sobre la invasión de los árabes en España
Tu navegador no soporta canvas

Para dibujar en un canvas en HTML5 el código necesario es:

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <canvas id="canvas" width="450" height="202" style="border:3px solid #ccc;"> Tu navegador no soporta canvas </canvas> <script type="module"> function animacion_con_canvas() // creamos la función animacion_con_canvas { const mi_canvas = document.getElementById("canvas"); // el elemento bautizado "canvas" sera usado para crear la animaciòn const contexto = mi_canvas.getContext("2d"); // creamos el objeto contexto para poder animar en canvas // contexto es un objeto. Como todo objeto tiene propiedades métodos y eventos // canvas soporta animaciones en 2d y en 3d, en este ejemplo usaremos animaciones 2d contexto.strokeStyle = "#000000"; // contexto es un objeto. Como todo objeto tiene propiedades métodos y eventos // aqui utilizamo la propiedad strokeStyle para definir el color del contorno del objeto a dibujar // el valor es un color en formato rgb contexto.lineWidth = 5; // aqui utilizamo la propiedad lineWidth para definir el ancho del contorno del objeto a dibujar contexto.arc(100, 100, 20, (Math.PI/180)*0, (Math.PI/180)*360, false); // aqui utilizamo el método arc para crear un círculo // el método arc se utiliza para crear parábolas, pero con los parámetros suficientes se puede crear un círculo // el método arc utiliza las variables (posición en x, posición en y, radio / tamaño del círculo, ángulo incial, ángulo final, sentido del arco a dibujar) contexto.stroke(); // utiliza el metodo stroke para mostrar en el cavas nuestro círculo } animacion_con_canvas(); // cuando la página se cargue, ejecutarmos otra función animacion_con_canvas(); </script> </body> </html>

Este ejemplo es parte de un tutorial más completo que puede consultarse:


Comenta y opina este texto     Lee mi libro de visitas
© 1997-2022 Alain García Gómez
albegago@hotmail.com
Twitter: Youtube @feesgo
YouTube Youtube
El vínculo a este documento es:

Compartir en facebook Compartir en twitter Compartir en whatsapp Rss

Puedes apoyar a este sitio invitándome a comer...

Este sitio utiliza cookies propias y de terceros para mejorar sus servicios. Si continua navegando, entendemos que acepta su uso. Política de Privacidad