duda en animación con canvas
Publicado por Ernesto (1 intervención) el 26/04/2020 08:55:19
tengo el siguiente codigoque dibuja un circulo:
mi pregunta es como puedo hacer para que haga algo parecido a la imagen de los circulos amarillos, me dijeron que con un for se podia pero como lo integro al código?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>circulo</title>
</head>
<body>
<canvas id="circulo" width="300px" height="300px" style="border: 0px solid gray;"></canvas>
<script>
window.addEventListener('load', () => {
let canvasCirculo = document.getElementById('circulo');
let ctx = canvasCirculo.getContext('2d');
ctx.beginPath();
ctx.arc(150, 150, 100, 0, 2 * Math.PI);
ctx.stroke();
});
</script>
</body>
</html>
mi pregunta es como puedo hacer para que haga algo parecido a la imagen de los circulos amarillos, me dijeron que con un for se podia pero como lo integro al código?
1
2
3
4
5
6
7
8
for (var i = 0; i <= 2; i = i + 0.2) {
ctx.beginPath();
ctx.lineWidth = 5;
ctx.arc(190 * i - 10 ,150,15,0, Math.PI * i, false);
document.write("Angulo final " + Math.PI * i + "<br>");
ctx.stroke();
ctx.fill();
}Valora esta pregunta
0
