HTML5的兩個(gè)屬性Video和Canvas
原文鏈接：http://html5doctor.com/video-canvas-magic/
首頁來看下它實(shí)現(xiàn)的Demo吧：http://html5doctor.com/demos/video-canvas-magic/demo1.html； 國外的網(wǎng)頁，加載速度可能會(huì)有點(diǎn)慢，保持耐心。
這個(gè)Demo使用Canvas實(shí)現(xiàn)了當(dāng)視頻播放的時(shí)候在視頻后面始終保持一個(gè)模糊的背景，代碼卻用的極少。
知識(shí)點(diǎn)：
- 1，頁面上絕對(duì)定位的元素，在同樣的z-index值下，先出現(xiàn)的在下面，后出現(xiàn)的在上面。本例中的canvas和video就是如此。
- 2，DOMContentLoaded事件，當(dāng)DOM樹構(gòu)建完成的時(shí)候就會(huì)執(zhí)行。這個(gè)事件對(duì)于js開發(fā)人員來說很重要。
- 3，Canvas的視覺尺寸(Visual Size)和畫布尺寸(Drawing-surface Size)，這兩個(gè)概念有著非常重要的區(qū)別。視覺尺寸是通過css控制的，而畫布尺寸是通過Canvas的height和width屬性來控制的。一般情況下，這兩個(gè)尺寸是相同的，但是他們是可以分別設(shè)置的，這個(gè)Demo里就是分別設(shè)置的。這類似于一張50*50的圖片，你通過css把它的長寬設(shè)置成了100*100。那么剩下的就好辦了，瀏覽器會(huì)自動(dòng)把圖片自適應(yīng)。
- 4，Canvas的drawImage方法，第一個(gè)參數(shù)傳的是video元素。這個(gè)方法將視頻的當(dāng)前幀直接繪制到Canvas上，事實(shí)上drawImage方法可以將任何有效的第一個(gè)參數(shù)繪制到Canvas上。