Question

我正在努力让我的红绿灯自动点亮并连续运行。这些功能不会显示所有灯光，只显示第一个和最后一个灯光。我尝试过使用setInterval（）但没有任何乐趣。这可能与这条线路在错误的地方有关。 ctx.clearRect（0,0，canvas.width，canvas.height）; 我是JavaScript新手，这是我第一次使用画布。我可以在这个

上得到一些帮助

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

提前谢谢

＆＃13;

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);

＆＃13;

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

＆＃13;

Answer 1

您设置间隔的方式不正确。使用如下：

http://jsfiddle.net/opv1cpyx/18/ enter link description here

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

var lights = [red, redAmber, green, amber];

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 li=0;
var myVar = setInterval(function () {
    if(li > 3)
        li = 0;
    draw(lights[li++]);
}, 3000);

Answer 2

试试这个

  $(document).ready(function () {
    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
    }
    setTimeout(function () { setInterval(function () { draw(red) }, 4000); }, 1000);
    setTimeout(function () { setInterval(function () { draw(redAmber) }, 4000); }, 2000);
    setTimeout(function () { setInterval(function () { draw(green) }, 4000); }, 3000);
    setTimeout(function () { setInterval(function () { draw(amber) }, 4000); }, 4000);
});

JavaScript-使用带画布的setInterval连续运行函数

2 个答案: