在canvas中繪製視訊
theme: channing-cyan
一起養成寫作習慣！這是我參與「掘金日新計劃 · 4 月更文挑戰」的第1天，點選檢視活動詳情。
本文章知識：
1.在canvas中顯示video的當前幀畫面
開始動手實現功能
先建立一個html檔案，和準備要用到的視訊檔案
```html
``
這樣我們就建立好了一個 306px * 202px 的 video 和 canvas 標籤啦，緊跟著，我們的javascript獲取了video和canvas標籤並利用getContext獲取到了畫布的上下文，用addEventListener方法監聽 video 的播放事件，當視訊播發的時候，就把視訊幀利用drawImage()` 畫到canvas中。
看看效果如何：
嗯？為什麼canvas中的畫面和video的畫面不一致呢，我們來分析一下上面寫的程式碼是在那個節點繪製video到canvas中的，是在
video.play() 被觸發的時候繪製了video，只繪製了一次，當前看到的canvas的畫面其實是video的第一幀，這就是為什麼video和canvas畫面不一致的原因。
解決canvas畫面和video畫面不一致的問題
1.既然現在只繪製一次顯示了一幀畫面，那我就執行好多好多次就好啦。
js
function loop() {
cav.drawImage(videoEle,0,0, canvasEle.width, canvasEle.height)
cav.drawImage(videoEle,0,0, canvasEle.width, canvasEle.height)
cav.drawImage(videoEle,0,0, canvasEle.width, canvasEle.height)
cav.drawImage(videoEle,0,0, canvasEle.width, canvasEle.height)
cav.drawImage(videoEle,0,0, canvasEle.width, canvasEle.height)
...
}
嗯，挺牛。
2.我們也可以用定時器來，設定間隔時間來定時繪製畫面。
```js function loop() { setInterval(() => { cav.drawImage(videoEle, 0, 0, canvasEle.width, canvasEle.height) }, 0) }
```
用了定時器畫面看著已經同步啦！
3.還有個API叫 requestAnimationFrame(), 也可以用來實現這個需求。
js
function loop() {
cav.drawImage(videoEle,0,0, canvasEle.width, canvasEle.height)
requestAnimationFrame(loop);
}
上面幾種方法有一個顯而易見的缺點就是，當視訊在停止播放的時候，還是會繼續執行繪製，所以我們要在視訊停止播放的時候也要停止畫布的繪製。
js
function loop() {
cav.drawImage(videoEle, 0, 0, canvasEle.width, canvasEle.height)
if(!videoEle.paused) {
requestAnimationFrame(loop)
return
}
}
paused返回true暫停 false播放 注意：因網路原因造成的緩衝狀態仍然是false。
至此，功能就簡單的實現了。如果你閱讀本文章覺得有不妥的地方可以評論留言給我。