Question

我想在画布上画一条线。我试图让这条线随着时间移动。我使用以下代码来执行此操作

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)并返回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（）函数在绘图到画布时不起作用

1 个答案: