我能够使用 canvas arch() 方法 stub 静态图像，并且我有一个 for 循环，但我坚持为什么 for 循环不从圆变量中减去所选的数字。我一直致力于如何创建一个 for 循环，当用户移动 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>最佳答案
您的代码似乎可以通过一些细微的修正正常工作。
我在循环中引入了一个附加变量 i 来跟踪当前迭代并在颜色之间交替。
//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>关于javascript - 如何使用 JavaScript 和 canvas arc() 方法更改重叠圆的大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60273079/