Question

我正试图掌握画布动画。我在http://www.kirupa.com/html5/creating_simple_html5_canvas_animation.htm遇到了一个很棒的教程（道具!!）但是我试图通过包含用户交互来进一步考虑这一点，以输入的形式指定圆圈的中心（我指的是它） as＆＃34; width＆＃34;在下面的代码中）。

我试过的是下面的，它在某种程度上起作用。您将看到圆圈的中心从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);

    }

}

Answer 1

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

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

解释：让我们检查一下代码中的 types ：

输入值始终为字符串：

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

此等于运算符忽略类型：60 == '60'与60 == 60一样真实：

start == width

只有===也会考虑这种类型。接下来，<运算符在将数字与数字作为字符串进行比较时隐式地将任何字符串转换为数字：'60' < 62为true，'60' < 58为false：

start < width

接下来，我们有一项将1添加（或减去）start的作业。只要start是一个数字，这就不是问题：

start += 1

在某些时候start == width将变为真，然后发生这种可怕的事情：

start = width

从现在起start是一个字符串，因为所以width 。 ==仍然可以使用，<仍可使用，但是......

start += 1

这将尝试添加字符串和数字。因为JavaScript的这种操作的结果始终是字符串，所以它将隐式地将数字转换为字符串，从而执行字符串连接：{ {1}}。重复几次，最后得到'60' + 1 === '601'，依此类推。

要防止这种情况发生，请参阅本答案顶部的解决方案：首先将字符串转换为数字。

画布动画 - 被困

1 个答案: