Question

我正在javascript中为一个项目工作，并根据guage的价值，整个事情应该改变颜色，它确实，但颜色坚持一些价值观，我无法弄清楚为什么这是在继续。

Normaly的行为应该如下：

介于0％和25％之间 - 红色
介于26％和75％之间 - 黄色
介于76％和100％之间 - 绿色

当代码运行时，它显然表现得应该除了......

如果介于3％和9％之间，则为黄色（应为红色）
如果它是100％它是红色（应该是绿色）
如果它是0％那么它是红色的，但酒吧是360度旋转......但是？

我看了两个多小时的代码，我找不到错误的原因，我想知道有人在这里可能会看到我错过的东西。

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




}

您可以在http://codepen.io/rgaspary/pen/Glfdn

看到代码

Answer 1

您正在使用字符串而不是数字。因此，比较是字母数字而不是数字比较。

例如，字符串 "9%"位于字符串"25%"之后。

Answer 2

我不知道同步是否是罪魁祸首，但是......

使用setInterval()通常是一个坏主意。

使用setTimeout()，当您的draw()函数执行完毕后，使用另一个setTimeout()递归调用它。

JavaScript规范的奇怪效果

2 个答案: