激情欧美日韩一区二区|国产18在线播放|黄的日本免费大片|国产色在线 | 亚洲|青青操夜夜操

原文鏈接：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上。