前面的話

本文將從最基本的imageData對象的理論知識說開去，詳細介紹canvas粒子系統的構建

imageData

關于圖像數據imageData共有3個方法，包括getImageData()、putImageData()、createImageData()

【getImageData()】

2D上下文可以通過getImageData()取得原始圖像數據。這個方法接收4個參數：畫面區域的x和y坐標以及該區域的像素寬度和高度

例如，要取得左上角坐標為(10,5)、大小為50*50像素的區域的圖像數據，可以使用以下代碼：

var imageData = context.getImageData(10,5,50,50);

返回的對象是ImageData的實例，每個ImageData對象有3個屬性：width/height/data

1、width：表示imageData對角的寬度

2、height：表示imageData對象的高度

3、data是一個數組，保存著圖像中每一個像素的數據。在data數組中，每一個像素用4個元素來保存，分別表示red、green、blue、透明度

[注意]圖像中有多少像素，data的長度就等于像素個數乘以4

//第一個像素如下var data = imageData.data;var red = data[0];var green = data[1]; var blue = data[2];var alpha = data[3];

數組中每個元素的值是在0-255之間，能夠直接訪問到原始圖像數據，就能夠以各種方式來操作這些數據

[注意]如果要使用getImageData()獲取的canvas中包含drawImage()方法，則該方法中的URL不能跨域

【createImageData()】

createImageData(width,height)方法創建新的空白ImageData對象。新對象的默認像素值 transparent black，相當于rgba(0,0,0,0)

var imgData = context.createImageData(100,100);

【putImageData()】

putImageData()方法將圖像數據從指定的ImageData對象放回畫布上，該方法共有以下參數

imgData：要放回畫布的ImageData對象(必須)x：imageData對象的左上角的x坐標(必須)y：imageData對象的左上角的y坐標(必須)dirtyX：在畫布上放置圖像的水平位置(可選)dirtyY：在畫布上放置圖像的垂直位置(可選)dirtyWidth：在畫布上繪制圖像所使用的寬度(可選)dirtyHeight：在畫布上繪制圖像所使用的高度(可選)

[注意]參數3到7要么都沒有，要么都存在

context.putImageData(imgData,0,0);
context.putImageData(imgData,0,0,50,50,200,200);

粒子寫入

粒子，指圖像數據imageData中的每一個像素點。下面以一個簡易實例來說明完全寫入與粒子寫入

【完全寫入】

200*200的canvas1中存在文字'小火柴'，并將canvas1整個作為圖像數據寫入同樣尺寸的canvas2中

<canvas id="drawing1" style="border:1px solid black"></canvas><canvas id="drawing2" style="border:1px solid black"></canvas><script>var drawing1 = document.getElementById('drawing1');var drawing2 = document.getElementById('drawing2');if(drawing1.getContext){ var cxt = drawing1.getContext('2d'); var cxt2 = drawing2.getContext('2d'); var W = drawing1.width = drawing2.width = 200; var H = drawing1.height = drawing2.height = 200; var str = '小火柴'; cxt.textBaseline = 'top'; var sh = 60; cxt.font = sh + 'px 宋體' var sw = cxt.measureText(str).width; if(sw > W){  sw = W; } cxt.fillText(str,(W - sw)/2,(H - sh)/2,W); //獲取imageData var imageData = cxt.getImageData(0,0,W,H);  //寫入drawing2中  cxt2.putImageData(imageData,0,0);</script>