canvas上的像素操作(圖像復制，細調)
總結
1、操作對象：ImageData 對象，其實是canvas的像素點集合
2、主要操作： var obj=ctx.getImageData(0,0,100,100); ctx.putImageData(obj,110,0)
3、操作圖片要放在站點才能正常操作，可以是本地站點可以是外部站點
4、屬性有三個：寬、高、data
5、for循環給每一個像素點添加或者修改
6、不同的公式可以繪制任意奇妙的圖形
像素操作
- 屬性
- width 返回 ImageData 對象的寬度(可以理解為一行像素的個數)
- height 返回 ImageData 對象的高度(可以理解為一列像素的個數)
- data 返回一個對象，其包含指定的 ImageData 對象的圖像數據
- 該對象包含每一個像素的四個rgba值，注意每個值都在0-255之間
- 這個四個參數和CSS中講的rgba顏色表示法原理相同，四個參數分別表示紅、綠、藍以及透明度。
- 所不同的是這里的透明度取值也是0-255,255表示完全不透明，0表示完全透明
- 方法
- getImageData(x,y,w,h) 返回 ImageData 對象，該對象為畫布上指定的矩形復制像素數據
- putImageData(imgData,dx,dy,dirtyX,dirtyY,w,h) 把圖像數據（從指定的 ImageData 對象）放回畫布上
首先討論第一種最簡單的putImageData用法，即putImageData(imgData,dirtyX,dirtyY)，在解釋其他參數
- imgData 規定要放回畫布的 ImageData 對象。
- dx/dy ImageData 對象左上角的 x/y坐標，以像素計。即准備繪制圖像的起點坐標.
-
[dirtyX,dirtyY,w,h]為一組可選參數，該參數確定了一個以dx和dy坐標原點的矩形，分別表示矩形的起點和寬高，該矩形把將要繪制的圖像限定在矩形區域內.
溫馨提示：如果用繪入外部圖片的辦法測試該屬性，在本地測試會出錯，這是由於javaScript的同源策略對context.getImageDate的影響，該策略是基於瀏覽器的安全，禁用會造成安全隱患。可以通過搭建一個本地站點，將文檔放到站點的方法測試。對於這一點在本課程中不做過多講解。
- createImageData() 創建新的、空白的 ImageData 對象
- var imgData=context.createImageData(width,height);以指定的尺寸（以像素計）創建新的 ImageData 對象
- var imgData=context.createImageData(imageData)創建與指定的另一個 ImageData 對象尺寸相同的新 ImageData 對象（不會復制圖像數據）
代碼
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>8-19 課堂演示</title> 6 </head> 7 <style type="text/css"> 8 </style> 9 <body> 10 <canvas id="canvas" width="500" height="300" style="background: #A9A9A9"> 11 很抱歉，您的瀏覽器暫不支持HTML5的canvas 12 </canvas> 13 <script> 14 var c=document.getElementById("canvas"); 15 var ctx=c.getContext("2d"); 16 ctx.fillStyle='rgba(255,55,5,0.6)' 17 ctx.fillRect(0,0,100,100) 18 var obj=ctx.getImageData(0,0,100,100); 19 // alert(obj.width) 20 // alert(obj.height) 21 // alert(obj.data.length) 22 //每一個像素包含四個顏色分量 23 // alert(obj.data[0]) 24 // alert(obj.data[1]) 25 // alert(obj.data[2]) 26 // alert(obj.data[3]) 27 28 ctx.putImageData(obj,110,0) 29 for (var i=0;i< obj.data.length; i++){ 30 obj.data[0+4*i]=100; 31 obj.data[1+4*i]=20; 32 obj.data[2+4*i]=250; 33 obj.data[3+4*i]=255; 34 } 35 36 ctx.putImageData(obj,220,0) 37 for (var i=0;i< obj.data.length; i++) { 38 obj.data[0+4*i]=Math.floor(Math.random()*255) 39 obj.data[1+4*i]=Math.floor(Math.random()*255) 40 obj.data[2+4*i]=Math.floor(Math.random()*255) 41 obj.data[3+4*i]=Math.floor(Math.random()*255) 42 } 43 ctx.putImageData(obj,330,0) 44 45 for (var i=0;i< obj.data.length; i++) { 46 var rad=Math.floor(Math.random()*255) 47 obj.data[0+4*i]=rad 48 obj.data[1+4*i]=rad 49 obj.data[2+4*i]=rad 50 obj.data[3+4*i]=rad 51 } 52 ctx.putImageData(obj,330,150) 53 54 55 </script> 56 57 </body> 58 </html>
操作圖片
放在站點才能正常操作
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>8-21 課堂演示</title> 6 </head> 7 <style type="text/css"> 8 </style> 9 <body> 10 <canvas id="canvas" width="900" height="300" style="background: #A9A9A9"> 11 很抱歉，您的瀏覽器暫不支持HTML5的canvas 12 </canvas> 13 <input type="button" value="像素操作" onclick="putImage()"> 14 <input type="button" value="反色繪制" onclick="fs()"> 15 <input id="ljxg" type="button" value="濾鏡效果" onclick="lj()"> 16 <script> 17 var c=document.getElementById("canvas"); 18 var ctx=c.getContext("2d"); 19 var img=new Image(); 20 img.onload=function(){ 21 ctx.drawImage(img,0,0,400,300) 22 } 23 img.src='../img/p3.jpg' 24 function putImage() { 25 var imgData=ctx.getImageData(0,0,400,300) //用getImageData函數從畫板上取得像素數據 26 //ctx.putImageData(imgData,500,0) //將所取得的整個像素數據畫到Canvas畫板上 27 //將所取得的像素數據的一部分畫到Canvas畫板上。 28 //ctx.putImageData(imgData,500,0,150,0,130,300) 29 //ctx.putImageData(imgData,500,0,300,0,130,300) 30 ctx.putImageData(imgData,500,0,0,0,130,300) 31 } 32 33 //反色繪制 34 function fs(){ 35 ctx.clearRect(500,0,400,300) 36 var imgData=ctx.getImageData(0,0,400,300) 37 for (var i=0;i<imgData.data.length ; i+=4) { 38 imgData.data[i+0]=255-imgData.data[i+0]; 39 imgData.data[i+1]=255-imgData.data[i+1] 40 imgData.data[i+2]=255-imgData.data[i+2] 41 } 42 ctx.putImageData(imgData,500,0) 43 } 44 45 //濾鏡效果 46 function lj(){ 47 ctx.clearRect(500,0,400,300) 48 var imgData=ctx.getImageData(0,0,400,300) 49 for (var i=0;i<imgData.data.length ; i+=4) { 50 imgData.data[i+0]=0; 51 //imgData.data[i+1]=0; 52 // imgData.data[i+2]=0; 53 } 54 ctx.putImageData(imgData,500,0) 55 } 56 </script> 57 58 </body> 59 </html>
繪制背景
1 <!DOCTYPE html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>8-22 課堂演示</title> 6 </head> 7 <style type="text/css"> 8 </style> 9 <body> 10 <canvas id="canvas" width="900" height="300" style="background: #A9A9A9"> 11 很抱歉，您的瀏覽器暫不支持HTML5的canvas 12 </canvas> 13 <script> 14 var c=document.getElementById("canvas"); 15 var ctx=c.getContext("2d"); 16 var imgData=ctx.createImageData(300,300); 17 for (var i=0;i<imgData.data.length;i+=4){ 18 var g=i*i*i*3%255 19 imgData.data[i+0]=g; 20 imgData.data[i+1]=g; 21 imgData.data[i+2]=g; 22 imgData.data[i+3]=255; 23 } 24 ctx.putImageData(imgData,0,0); 25 26 for (var i=0;i<imgData.data.length;i+=4) 27 { 28 g=Math.floor((i*i+4*i+30)%255) 29 imgData.data[i+0]=g; 30 imgData.data[i+1]=g; 31 imgData.data[i+2]=255; 32 imgData.data[i+3]=255; 33 } 34 ctx.putImageData(imgData,300,0); 35 36 for (var i=0;i<imgData.data.length;i+=4) 37 { 38 g=Math.floor(Math.sqrt(i*i*5)%255) 39 imgData.data[i+0]=200; 40 imgData.data[i+1]=g; 41 imgData.data[i+2]=g; 42 imgData.data[i+3]=255; 43 } 44 ctx.putImageData(imgData,600,0); 45 </script> 46 47 </body> 48 </html>