¡Hola a todos! Soy nuevo en la creación de dibujos con canvas en HTML y estoy tratando de dibujar una flor de 5 pétalos utilizando círculos en lugar de imágenes. He estado investigando sobre la estructura del ciclo fory no estoy seguro de cómo debería ser la estructura correcta para crear esta flor. ¿Es válido incorporar todos los datos cambiantes dentro de un array para que el ciclo for recorra esos valores y dibuje la flor con canvas en html en vez de crear una función que realice el dibujo? Cualquier consejo o sugerencia sería muy apreciado. ¡Gracias! A continuación dejo mi código.
<canvas width="600" height="400"></canvas>
<script>
var coordenadasX = [300,300,300,280,320];
var coordenadasY = [220,200,180,200,200];
let colors = ["blue", "red", "yellow", "orange", "black"]
var pantalla = document.querySelector("canvas");
var pincel = pantalla.getContext("2d");
pincel.fillStyle = "lightgray";
pincel.fillRect(0, 0, 600, 400);
function dibujarCirculo(x, y, radio, color) {
pincel.fillStyle = color;
pincel.beginPath();
pincel.arc(x, y, radio, 0, 2*3.14);
pincel.fill();
}
for (var i = 0; i < coordenadasX.length; i++) {
dibujarCirculo(coordenadasX[i], coordenadasY[i], 10,colors[i]);
}
</script>El resultado es el siguiente.
