javascript - 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 函数必须自己设置超时以保持闪烁继续。