绘图后淡出HTML 5画布的一部分

Question

据我所知，HTML5的画布在绘制后不允许访问元素，因为它们会立即变为图形模式。

我刚刚在http://www.storiesinflight.com/jsfft/visualizer/index.html遇到了HTML5音频API的精彩演示，我想知道在绘制之后圆圈是如何收缩和淡出的。 （要查看，只需单击暂停，并观察每个弧元素逐渐消失。）这是如何完成的？ JS的片段会很棒。

非常感谢。

注意：我相信Firefox 4是目前运行的唯一浏览器。

Answer 1

你可能会问两个问题，所以我会尝试回答这两个问题。

简短的回答是“他们会记录所有内容并重新绘制内容。”如果你只是想知道如何开始跟踪一些状态，也就是说Canvas就像是在保留模式下绘制一样，请参阅these tutorials。

在您给出的具体示例中，如果他们不愿意，他们甚至不需要 来跟踪任何内容，因为圆圈的大小和位置是基于当前的音频输入在当前秒，他们只是擦拭整个画布并接受输入并将其转换为每X毫秒适当大小和位置的圆圈。

所以圈子不会消失。它们被完全擦除，而正在绘制较小的圆圈。它会产生淡出效果，但可能无法跟踪任何状态。

Answer 2

代码可以存储circle对象，其中包含radius，x和y等属性。

然后它可以为这些属性设置动画，并在canvas上以类似于游戏循环的间隔绘制它。

不访问DOM元素。