使画布内的线条闪烁答案

【问题标题】：Make lines blink inside a canvas使画布内的线条闪烁
【发布时间】：2012-07-17 10:34:47
【问题描述】：

我目前正在使用Kinetic Js 和画布开发一个 HTML5 和 Javascript 项目。

我需要我的台词 (Kinetic.Line) 闪烁。

我尝试过包含无限循环的东西，里面有setTimeout 函数，但是我不能使用javascript（这样的缺点，因为我不能选择点！）。

有人有什么想法可以帮助我吗？

while (1) {
setTimeout("stage.load(myjson[0])", 1000);
setTimeout("stage.load(myjson[1])", 1000);
}

（对不起我的英语不好）

【问题讨论】：

@FlorianMargaine 我认为blink 标签在这种情况下不会有任何帮助...
@Chips_100 不，这是为了好玩：]
你能展示你的尝试吗？我的第一个想法是使用它的颜色和背景颜色交替绘制线条来模拟闪烁。
@CMKanode 我刚刚在我的第一篇文章中添加了这个。我认为stage.load 方法是内存贪婪的......但我不喜欢我必须根据需要画线的事实！

标签： javascript canvas lines kineticjs blink

【解决方案1】：

这是使用 KineticJS 使线条闪烁的一种方法。而不是使用 setTimeout，我认为最好使用内置在舞台对象中的 KineticJS onFrame 事件。然后您可以使用 setAlpha 设置线条的不透明度，并使用 getAlpha 获取线条的当前不透明度。 setAlpha('0') 将使线条透明，setAlpha('1') 将使线条可见。

我在这里设置了一个小提琴： JSFiddle

以下是实际闪烁该行的相关位：

var flashTime = 0;

stage.onFrame(function(frame){
    if(frame.time > (flashTime + 250)){;
        flashTime = frame.time;
        redLine.setAlpha(redLine.getAlpha() == 1 ? '0' : '1');
        layer.draw();                                
    };                                        
});

【讨论】：