Javascript 画布动画-卡住

我正在努力掌握画布动画。我在（props！！）上遇到了一个很棒的教程，但我正试图通过包括用户交互来进一步了解它，以输入的形式指定圆的中心（我在下面的代码中将其称为“宽度”）

我试过的方法如下，在一定程度上是有效的。你会看到圆心从175开始。当我输入高于此值的任何内容时，圆确实会向右移动，根据我的代码，它应该向右移动。然后，我可以输入任何小于当前点的数字，它将向左移动

然而！！输入第一个图形后，无论它小于或大于起始点，我都会尝试输入一个大于当前点的图形，而圆就消失了

我很困惑，在解释了为什么会发生这种情况以及可能的解决方案之后。。。如果可能的话

提前谢谢，我的代码是

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var requestAnimFrame = window.requestAnimationFrame ||
                       window.mozRequestAnimationFrame ||
                       window.webkitRequestAnimationFrame ||
                       window.msRequestAnimationFrame;

var start = 175;
var startH = 250;
var radius = 175;

ctx.beginPath();

ctx.arc(start, startH, radius, 0, Math.PI * 2, false);
ctx.closePath();

ctx.fillStyle = "#006699";
ctx.fill();

function drawCircle() {
    var width = document.getElementById("width").value;

    if(start == width) {
        start = width;          

    } else {
        ctx.clearRect(0, 0, canvas.height, canvas.width);

        ctx.beginPath();

        ctx.arc(start, startH, radius, 0, Math.PI * 2, false);
        ctx.closePath();

        ctx.fillStyle = "#006699";
        ctx.fill();

        if(start < width) {
            start += 1;
        } else {
            start -= 1;
        }

        requestAnimFrame(drawCircle);

    }

}

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var requestAnimFrame=window.requestAnimationFrame||
window.mozRequestAnimationFrame||
window.webkitRequestAnimationFrame||
window.msRequestAnimationFrame；
var启动=175；
var-startH=250；
var半径=175；
ctx.beginPath（）；
ctx.弧（起点、起点、半径、0、数学PI*2、假）；
ctx.closePath（）；
ctx.fillStyle=“#006699”；
ctx.fill（）；
函数drawCircle（）{
var width=document.getElementById（“width”）.value；
如果（开始==宽度）{
开始=宽度；
}否则{
clearRect（0，0，canvas.height，canvas.width）；
ctx.beginPath（）；
ctx.弧（起点、起点、半径、0、数学PI*2、假）；
ctx.closePath（）；
ctx.fillStyle=“#006699”；
ctx.fill（）；
如果（开始<宽度）{
开始+=1；
}否则{
开始-=1；
}
画框（画圈）；
}
}

解决方案：将字符串转换为数字：

var width = Number(document.getElementById("width").value);

start += 1

---

解释：让我们检查代码中的类型：

输入值将始终是字符串：

此相等运算符忽略类型：

60==“60”

与

60==60

一样为真：

start == width

---

只有

==

也将考虑该类型。接下来，宽度是输入字段的值，对吗？但是

start

需要是一个数字，

width

是一个字符串……这样肯定会出错。谢谢Xufox！我使用了Number（document.getElementById（“width”）.value）；这是完美的。为什么事情总是这么简单？！示例：

start==width

将在

60==60'

时返回

true

，但是

start=width

将使

start

成为字符串，任何

start+=1

之后将返回

'601'

，

'6011'

，等等。哦，这就是问题所在吗？发布作为答案！谢谢你的解释。现在说得通了！在末尾添加1将其从画布上推离，因此出现了消失行为！再次感谢！

start < width

start += 1

start = width

start += 1