• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

259
Views
javascript: 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í:

ingrese la descripción de la imagen aquí

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.

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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>

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error