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:
Este sitio utiliza cookies propias y de terceros para mejorar sus servicios. Si continua navegando, entendemos que acepta su uso. Política de Privacidad
Menú ::
@feesgo
