Javascript setInterval() 函数在绘制到 canvas 时不起作用

Question

我正在尝试在 canvas 中画一条线。我试图让这条线随时间移动。我正在使用以下代码来执行此操作

var ctx = mycanvas.getContext('2d');
ctx.beginPath();
for (var x = 0; x < 200; x++) {
    setInterval(draw(x, 0, ctx), 3000);
    x = x++;
}

这里是绘制函数

function draw(x, y, ctx) {
    ctx.moveTo(10 + x, 400);
    ctx.lineTo(11 + x, 400);
    ctx.lineWidth = 10;
    ctx.strokeStyle = "#ff0000";
    ctx.stroke();
}

但是 setInterval() 函数不起作用，正在立即绘制线条。它不等待 3s 继续下一个像素。我是不是搞错了？

Answer 1

setInterval 需要一个函数作为第一个参数。现在你只是调用 draw(x,0,ctx) 而它 returns undefined。所以你的代码相当于 setTimeout(undefined, 3000).

相反，您需要提供一个可调用函数并从中调用 draw。试试这个：

setInterval(function() {
    draw(x, 0, ctx);
}, 3000);

另一个问题是由于循环行为中典型的闭包。您需要创建单独的范围才能使用 x:

的各个值

for (var x = 0; x < 200; x++) {
    (function(x) {
        setInterval(function() {
            draw(x, 0, ctx);
        }, 3000 * x);
    })(x);
    x = x++;
}

另请查看 this 问题以获取更多示例，了解如何解决此类情况。

Javascript setInterval() 函数在绘制到 canvas 时不起作用

Javascript setInterval() function not working in drawing to canvas

javascript

canvas

html5-canvas