先展示一下效果：
左邊是處理前的原圖，右邊是經過canvas處理之后的效果。
html代碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <canvas id="canvas" width="800" height="800"></canvas> 9 </body> 10 </html>
javascript代碼如下：
1 <script type = "text/javascript"> 2 var canvas = document.getElementById('canvas'); 3 var context = canvas.getContext('2d'); 4 var image = new Image(); 5 image.src = "img/7.jpg"; 6 image.onload = function(){ 7 context.drawImage(image,0,0,300,500); 8 var imageData = context.getImageData(0,0,300,500); 9 //獲取到每個像素的信息 10 var px = imageData.data; 11 for(var i = 0; i < px.length; i+=4){ 12 var r = px[i]; 13 var g = px[i + 1]; 14 var b = px[i + 2]; 15 var gray = ((r + g + b)/3); 16 px[i] = gray; 17 px[i + 1] = gray; 18 px[i + 2] = gray; 19 } 20 context.putImageData(imageData,300,0); 21 } 22 </script>
canvas實現對畫面的修改說的簡單一些就是將一個一個像素點從新賦值畫上去，最后展示在面前的就是一幅經過修改的畫面。同理我們如果對視頻進行這樣的修改呢，我們知道視頻就是一張一張圖片組成的，如果我們將每一張圖片都做這樣的修改是不是也能的到這樣的效果。下面的代碼是對視頻的修改。
html代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <canvas id="canvas" width="800" height="800"></canvas> 9 <video src="ganggang.mp4" id="video"></video> 10 </body> 11 </html>
javascript代碼：
1 <script type="text/javascript"> 2 var canvas = document.getElementById('canvas'); 3 var context = canvas.getContext('2d'); 4 var video = document.getElementById('video'); 5 function animate(){ 6 if(!video.end){ 7 context.drawImage(video,0,0,200,300); 8 var imageData = context.getImageData(0,0,200,300); 9 var px = imageData.data; 10 for(var i = 0; i < px.length; i+=4){ 11 var r = px[i]; 12 var g = px[i+1]; 13 var b = px[i+2]; 14 var gray = ((r+g+b)/3); 15 px[i] = gray; 16 px[i+1] = gray; 17 px[i+2] = gray; 18 } 19 context.putImageData(imageData,200,0); 20 window.requestAnimationFrame(animate); 21 } 22 } 23 video.oncanplay = function(){ 24 video.play(); 25 window.requestAnimationFrame(animate); 26 } 27 </script>
最后的效果這里就不展示了。