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

Aditya 发表于 Dev

阿迪亚

我在画布上画了一些小圆圈（用红色填充）作为标记，现在我希望它们在我无法成功的地方闪烁。请任何人帮助，我被困住了。

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

洛伦兹·迈耶

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

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必须自己设置一个超时，以使闪烁继续进行。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。