Paul Rouget和Tristan Nitot 使用Canvas和<video>创造了一个很有趣的工具，由paul提供的最新demo 为我们展示了实时的动态内容注入。


注意到图片中的Firefox图标和发光的手机了吗？这都要归功于 Canvas。

Paul向我们解释了他是如何做到的：
很显然，我使用了 <video/> 标记；
但是你们并没有看到video的元素（display：none），只看到了<canvas/> 标记；
你在右上方看到的所有模式都是规则的<img/>,<video/>和<canvas/>元素；
播放/暂停按钮是一个<svg/> 元素(position: absolute;) 。

最关键的是：
第一，video的内容是注入到main canvas中的。这就是为什么canvas元素看上去像一个video元素；
第二，那两个亮的canvas的位置是需要计算的（你可以访问到所有像素值）；
第三，transformation也需要计算(rotation, scale,translation);
第四，选择模式的内容是注入到main canvas中的。


简图：

你可以点击此处在Firefox上查看demo，也可以的查看视频。