如何使用 JavaScript 和画布 arc() 方法更改重叠圆的大小？
[英]How can I change the sizes of overlapping circles using JavaScript and the canvas arc() Method?
问题描述
我能够使用 canvas arch() 方法将静态图像存根，并且我有一个 for 循环，但我一直在思考为什么 for 循环不会从 circle 变量中减去选定的数字。 我被困在如何创建一个 for 循环，当用户移动滑块时，它会使圆圈改变大小并适当地交替颜色。
//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>
1 个解决方案
解决方案1
1 已采纳 2020-02-18 03:22:40
您的代码似乎可以通过一些小的更正来正常工作。
我在循环中引入了一个额外的变量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>
如何使用 canvas 拆分 javascript 中的圆圈数组以在一半圆圈中显示数字，在另一半圆圈中显示字母
[英]How to split array of circles in javascript using canvas to display numbers in half the circles and letters in the other half of circles
如何确定在 JavaScript 中的 canvas 上绘制的两个圆之间的最短距离？
[英]How can I determine the shortest distance between two circles drawn on a canvas in JavaScript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.