Mon. Oct 2nd, 2023

[ANSWERED] html – How can I change the sizes of overlapping circles using JavaScript and the canvas arc() Method?

By

Nov 20, 2022 canvas, for-loop, html, javascript

Solution 1 :

Your code seems to work fine with some minor corrections.

I’ve introduced an additional variable i in the loop to keep track of the current iteration and alternate between colors.

//Canvas constants
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 200;

//Slider
let slider = document.getElementById("myRange");
let bandWidth = document.getElementById("bandWidth");

bandWidth.innerHTML = slider.value;

function draw() {
  bandWidth.innerHTML = this.value;
  // console.log(this.value);
  let input = this.value;
  let circle = radius;
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  for(let i = 0; input <= circle; circle -= input, i++){
    // console.log(circle);
    ctx.beginPath();
    ctx.arc(centerX, centerY, circle, 0, 2 * Math.PI, false);
    ctx.fillStyle = i % 2 === 0 ? 'red' : 'blue';
    ctx.fill();
  }
}

slider.oninput = draw;
draw.call(slider);

<canvas id="myCanvas" width="400" height="400" style="border: 2px solid black"></canvas>
<br>
<div>BandWidth:</div>
<!--Slider input-->
<!--onChnage will update the bandwith value-->
<input type="range" id="myRange" value="25" min="5" max="50" step="5">

<p>Current BandWith:
  <span id="bandWidth"></span>
</p>

Problem :

I was able to stub out a static image using the canvas arch() method, and I have a for loop, but I’m stuck on why the for loop doesn’t subtract from the circle variable down to number selected. I’m stuck on how create a for loop that would make the circles change size and appropriately alternate color as a user moves the slider.

//Canvas constants
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 200;

//Slider
let slider = document.getElementById("myRange");
let bandWidth = document.getElementById("bandWidth");

bandWidth.innerHTML = slider.value;

slider.oninput = function() {
bandWidth.innerHTML = this.value;
// console.log(this.value);
let input = this.value;
let circle = radius;


  for(input; input <= circle; circle -= input){
    //console.log(circle); 
    //I don't know why the loop does work correctly above 30...
    }
  }
  
//Figure out how to get the below in a for loop...
//Stubbed out what circles would look like at 25.
// the first circle has a band with of 25
//first circle
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = 'red';
ctx.fill();

//Second circle
ctx.beginPath();
ctx.arc(centerX, centerY, 175, 0, 2 * Math.PI, false);
ctx.fillStyle = 'blue';
ctx.fill();

//Third Circle
ctx.beginPath();
ctx.arc(centerX, centerY, 150, 0, 2 * Math.PI, false);
ctx.fillStyle = 'red';
ctx.fill();

//Fourth Circle
ctx.beginPath();
ctx.arc(centerX, centerY, 125, 0, 2 * Math.PI, false);
ctx.fillStyle = 'blue';
ctx.fill();

//Fifth
ctx.beginPath();
ctx.arc(centerX, centerY, 100, 0, 2 * Math.PI, false);
ctx.fillStyle = 'red';
ctx.fill();

//Sixth
ctx.beginPath();
ctx.arc(centerX, centerY, 75, 0, 2 * Math.PI, false);
ctx.fillStyle = 'blue';
ctx.fill();

//Seventh
ctx.beginPath();
ctx.arc(centerX, centerY, 50, 0, 2 * Math.PI, false);
ctx.fillStyle = 'red';
ctx.fill();

//Eigth
ctx.beginPath();
ctx.arc(centerX, centerY, 25, 0, 2 * Math.PI, false);
ctx.fillStyle = 'blue';
ctx.fill();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BullsEye</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400" style="border: 2px solid black"></canvas>
  <br>
  <div>BandWidth:</div>
  <!--Slider input-->
  <!--onChnage will update the bandwith value-->
  <input type="range" id="myRange" value="25" min="5" max="50" step="5">
  
  <p>Current BandWith:
    <span id="bandWidth"></span>
  </p>
    
  <script src="bullsEye.js"></script>
</body>
</html>

By

Related Post

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022