我正在为工作中的项目制作 javascript 中的量规，并根据量规的值，整个事情应该改变颜色并且确实如此，但是颜色在某些值上变得疯狂，我无法弄清楚为什么会这样上。
Normaly 行为应如下所示：
- 在 0% 和 25% 之间 - 红色
- 26% 到 75% - 黄色
- 76% 到 100% 之间 - 绿色
当代码运行时，它显然表现得应该除了......
- 如果它在 3% 和 9% 之间，它是黄色的（应该是红色的）
- 如果是 100% 则为红色（应为绿色）
- 如果它是 0%，它是红色的，但条形图会 360 度旋转……嗯？
我已经查看了超过 2 个小时的代码，但我找不到错误的逻辑，我想知道这里有人可能会看到我错过的东西。
HTML：
<canvas id="canvas" width="300" height="300">
CSS：
body {
background: #333;
}
/*Centering the gauge*/
#canvas {
display: block;
width: 300px;
margin: 100px auto;
}
/*Custom font for numbers*/
@font-face {
font-family: "bebas";
src: url("http://thecodeplayer.com/uploads/fonts/BebasNeue.otf");
}
JS：
window.onload = function(){
//canvas initialization
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//dimensions
var W = canvas.width;
var H = canvas.height;
//Variables
var red = "25%";
var yellow = "75%";
var green = "100%";
var degrees = 0;
var new_degrees = 724;
var difference = 0;
var color = "lightgreen";
var bgcolor = "#222";
var redcolor = "orangered";
var yellowcolor = "goldenrod";
var greencolor = "lightgreen";
var text;
var animation_loop, redraw_loop;
var startAngle = 1 * Math.PI;
var endAngle = 1.7 * Math.PI;
function init()
{
//Clear the canvas everytime a chart is drawn
ctx.clearRect(0, 0, W, H)
//Background 360 degree arc
ctx.beginPath();
ctx.strokeStyle = bgcolor;
ctx.lineWidth = 30;
ctx.arc(W/2, H/2, 100, startAngle, endAngle, false); //you can see the arc now
ctx.stroke();
//gauge will be a simple arc
//Angle in radians = angle in degrees * PI / 180
var radians = degrees * Math.PI / 1030;
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineWidth = 30;
//The arc starts from the rightmost end. If we deduct 90 degrees from the angles
// CHANGE THIS LINE HERE
//the arc will start from the left
ctx.arc(W/2, H/2, 100, startAngle, radians - 180*Math.PI/180, false);
//you can see the arc now
ctx.stroke();
//Lets add the text
ctx.fillStyle = color;
ctx.font = "50px bebas";
text = Math.floor(degrees/720*100) + "%";
if (text < "25%") {
color = redcolor;
} else if (text > "25%") {
color = yellowcolor;
} else if (text > "75%") {
color = greencolor;
}
//Lets center the text
//deducting half of text width from position x
var text_width = ctx.measureText(text).width;
//adding manual value to position y since the height of the text cannot
//be measured easily. There are hacks but we will keep it manual for now.
ctx.fillText(text, W/2 - text_width/2, H/2 + 15);
}
function draw()
{
//Cancel any movement animation if a new chart is requested
if(typeof animation_loop != undefined) clearInterval(animation_loop);
//random degree from 0 to 360
new_degrees = Math.round(Math.random()*360);
//new_degrees = 721;
difference = new_degrees - degrees;
//This will animate the gauge to new positions
//The animation will take 1 second
//time for each frame is 1sec / difference in degrees
animation_loop = setInterval(animate_to, 1000/difference);
}
//function to make the chart move to new degrees
function animate_to()
{
//clear animation loop if degrees reaches to new_degrees
if(degrees == new_degrees)
clearInterval(animation_loop);
if(degrees < new_degrees)
degrees++;
else
degrees--;
init();
}
//Lets add some animation for fun
draw();
redraw_loop = setInterval(draw, 2000); //Draw a new chart every 2 seconds
}