HTML5-canvas使圆圈在画布内闪烁

Question

我在画布里画了几个小圆圈（用红色填充）作为标记，现在我希望它们闪烁，我没能成功。 请任何人帮忙，我被困住了。

var X = 135;
var Y = 70;

function button() {
    var butt = c.getContext("2d");
    butt.beginPath();
    butt.arc(X, Y, 4, 0, 2 * Math.PI);
    butt.fillStyle = "#FF0000";
    butt.fill();
    butt.stroke();
    butt.css('visibility', butt.css('visibility') === 'hidden' ? '' : 'hidden')
}
button();
button(X = 200, Y = 100);
button(X = 280, Y = 200);

Answer 1

首先，您必须对您的功能进行两处更改。 传入参数并返回对按钮的引用。

function button(X, Y) {
    var butt = c.getContext("2d");
    butt.beginPath();
    butt.arc(X, Y, 4, 0, 2 * Math.PI);
    butt.fillStyle = "#FF0000";
    butt.fill();
    butt.stroke()
}

这允许您创建这样的按钮并保留参考：

b1 = button(135, 70);
b2 = button(200, 100);
b3 = button(280, 200);

然后，您可以创建一个切换可见性并将其称为的功能

function toggle_button(items){
    items.forEach(function(item) {
        item.css('visibility', item.css('visibility') === 'hidden' ? 'visible' : 'hidden')
    });
    setTimeout(function toggle_buttons(items),500);
}

setTimeout(function toggle_buttons([b1, b2, b3]),500);

为了闪烁，函数toggle_buttons必须设置一个超时本身以保持闪烁继续。