0
257
Vistasjavascript: muestra círculos de diferentes colores en diferentes tamaños
Tengo una tarea que me pide que imprima dos círculos de colores alternos con diferentes tamaños. El resultado final se vería así:
En este momento, estoy luchando por imprimir el círculo de color azul encima del círculo de color rojo y este es el código que he escrito:
canvas = document.getElementById("testCanvas"); context = canvas.getContext("2d"); centerX = canvas.width / 2; centerY = canvas.height / 2; //Creates a red color circle context.arc(centerX, centerY, 200, 0, 2 * Math.PI); context.fillStyle = 'red'; context.fill(); //Creates a blue color circle on top of the red color circle context.arc(centerX, centerY, 150, 0, 2 * Math.PI); // context.lineWidth=5; context.fillStyle = 'blue'; context.stroke(); <canvas id="testCanvas" width="400" height="400"></canvas>Tengo problemas con el último bloque de código porque si digo fill() en la última línea de código, el color azul domina el lienzo. Cualquier ayuda sería muy apreciada. Gracias por adelantado.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Tienes que recorrer y dibujar círculos que aumentan o disminuyen el radio. Y cambia el color dentro del bucle. Cada vez que dibuje un círculo, debe usar beginPath() para comenzar y closePath() para evitar superposiciones.
const canvas = document.getElementById("testCanvas"); const context = canvas.getContext("2d"); const centerX = canvas.width / 2; const centerY = canvas.height / 2; let radius = centerX; let color = "red"; while (radius > 0) { context.beginPath(); context.fillStyle = color; context.arc(centerX, centerY, radius, 0, 2 * Math.PI); context.fill(); context.closePath(); color = color === "red" ? "blue" : "red"; radius -= 25; } <canvas id="testCanvas" width="400" height="400"></canvas>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta