原文链接：http://html5doctor.com/video-canvas-magic/

首页来看下它实现的Demo吧：http://html5doctor.com/demos/video-canvas-magic/demo1.html； 国外的网页，加载速度可能会有点慢，保持耐心。

这个Demo使用Canvas实现了当视频播放的时候在视频后面始终保持一个模糊的背景，代码却用的极少。

知识点：

• 1，页面上绝对定位的元素，在同样的z-index值下，先出现的在下面，后出现的在上面。本例中的canvas和video就是如此。
• 2，DOMContentLoaded事件，当DOM树构建完成的时候就会执行。这个事件对于js开发人员来说很重要。
• 3，Canvas的视觉尺寸(Visual Size)和画布尺寸(Drawing-surface Size)，这两个概念有着非常重要的区别。视觉尺寸是通过css控制的，而画布尺寸是通过Canvas的height和width属性来控制的。一般情况下，这两个尺寸是相同的，但是他们是可以分别设置的，这个Demo里就是分别设置的。这类似于一张50*50的图片，你通过css把它的长宽设置成了100*100。那么剩下的就好办了，浏览器会自动把图片自适应。
• 4，Canvas的drawImage方法，第一个参数传的是video元素。这个方法将视频的当前帧直接绘制到Canvas上，事实上drawImage方法可以将任何有效的第一个参数绘制到Canvas上。