效果图：
注：本例需在服务器上运行的才能看到效果、视频文件可换成本地视频（HBuilder有集成服务器或者使用wampmanager）。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
<style type="text/css">
#canv{
border:1px solid red;
}
</style>
</head>
<body> <video id="sourcevid" autoplay="true" loop="true">
<source src="BigBuckBunny_640x360.mp4" type="video/mp4"/>
<source src="BigBuckBunny_640x360.ogv" type="video/ogg"/>
</video>
<canvas id="canv" width="640" height="360"></canvas>
<script type="text/javascript">
var canv=document.getElementById('canv');
var video=document.getElementById('sourcevid');
var ctx=canv.getContext("2d");
function run(){
//在画布里绘制出sourcevid
ctx.drawImage(video,0,0);
window.requestAnimationFrame(run);
var imageData = ctx.getImageData(0,0,400,400);
var d = imageData.data;//保存的是红绿蓝透明度的通道的值
for(var i = 0; i < d.length; i += 4) {
var verage = (d[i] + d[i+1] + d[i+2])/3;
var verage1 = 0.299 * d[i] + 0.587 * d[i+1] + 0.114 * d[i+2]
d[i] = d[i+1] = d[i+2] = verage1;
}
// putImageData() 将图像数据放回画布
ctx.putImageData(imageData,0,0);
}
run();
</script>
</body>
</html>