JavaScript-使用 setInterval 和 Canvas 连续运行函数

Question

我正在努力让交通灯自动亮起并持续运行。这些功能不会显示所有指示灯，仅显示第一个和最后一个。我尝试过使用 setInterval() 但没有任何乐趣。这可能与这条线放置在错误的位置有关。 ctx.clearRect(0, 0, canvas.width, canvas.height);我是 JavaScript 新手，这是我第一次使用 Canvas 。请给我一些帮助

这是我的 JSFiddle 链接: http://jsfiddle.net/nmrsjp/opv1cpyx/11/

提前谢谢

var red = ["Red", "White", "White"]
var redAmber = ["Red", "Yellow", "White"]
var green = ["White", "White", "Green"]
var amber = ["White", "Yellow", "White"]

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

var circle = function (x, y, radius) {
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI * 2, false);
    ctx.stroke();
    ctx.fill();
};
var draw = function (colour) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (i = 0; i < 3; i++) {
        ctx.lineWidth = 1;
        ctx.strokeStyle = "Black";
        ctx.fillStyle = colour[i];
        circle(50, x, 40);
        x = x + 120;
    }
    x = 50
}
var myVar = setInterval(function () {draw(red)}, 1000);
var myVar = setInterval(function () {draw(redAmber)}, 3000);
var myVar = setInterval(function () {draw(green)}, 3000);
var myVar = setInterval(function () {draw(amber)}, 3000);

<canvas id="canvas1" width="100" height="350" style="border:1px solid"></canvas>

Answer 1

您每秒将颜色设置为红色一次。您每隔三秒设置一次其他颜色，它们几乎都会同时触发，但也会通过再次设置红色立即覆盖。

我不确定你到底希望它如何表现，但如果你想要一个恒定的间隔，但在不同的时间触发，你也需要延迟间隔的设置。下面是一个 4s 间隔全部延迟 1s 的示例:

setInterval(function () { draw(red) }, 4000);
setTimeout(function() { setInterval(function () { draw(redAmber) }, 4000); }, 1000);
setTimeout(function() { setInterval(function () { draw(green) }, 4000); }, 2000);
setTimeout(function() { setInterval(function () { draw(amber) }, 4000); }, 3000);

Fiddle

定义一个序列然后循环使用一个间隔可能会更容易:

var colourSequence = [red, redAmber, green, amber];
var position = -1;

function changeColour() {
    draw(colourSequence[++position % colourSequence.length]);
}

setInterval(changeColour, 1000);

Fiddle