HTML5 Canvas 像素處理

HTML5 Canvas 像素處理的createImageData()函數(shù)使用方法，在線(xiàn)實(shí)例演示canvas像素處理，將像素復(fù)制到畫(huà)布上，如何使用語(yǔ)法定義及它的屬性值詳細(xì)資料等。

可以訪(fǎng)問(wèn)HTML5畫(huà)布的各個(gè)像素。您可以使用ImageData對(duì)象來(lái)執(zhí)行此操作。該ImageData對(duì)象包含一個(gè)像素?cái)?shù)組。通過(guò)訪(fǎng)問(wèn)此數(shù)組，您可以操縱像素。完成像素操作后，需要將像素復(fù)制到畫(huà)布上以顯示它們。

創(chuàng)建一個(gè)ImageData對(duì)象

創(chuàng)建ImageData對(duì)象是使用2D上下文功能完成的 createImageData()。這是一個(gè)示例:

var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");

var width  = 100;
var height = 100;
var imageData = context.createImageData(width, height);

函數(shù) 的width和height屬性createImageData()設(shè)置由所ImageData 創(chuàng)建對(duì)象表示的像素區(qū)域的寬度和高度（以像素為單位）。上面的示例創(chuàng)建了一個(gè)ImageData具有100 x 100像素面積的對(duì)象。

ImageData屬性

該ImageData對(duì)象具有三個(gè)屬性:

• width

• height

• data

width和height屬性包含所述圖形數(shù)據(jù)區(qū)的寬度和高度。
該data屬性是一個(gè)包含像素值的字節(jié)數(shù)組。

像素處理

 data數(shù)組 中的每個(gè)像素均包含4個(gè)字節(jié)的值。紅色，綠色和藍(lán)色為一個(gè)值，alpha通道為一個(gè)值。像素的顏色是通過(guò)將紅色，綠色和藍(lán)色混合在一起以構(gòu)成最終顏色來(lái)確定的。Alpha通道說(shuō)明像素的透明度。紅色，綠色，藍(lán)色和Alph值中的每一個(gè)都可以采用0到255之間的值。
這是一個(gè)設(shè)置第一個(gè)像素的顏色和Alpha值的代碼示例:

var pixelIndex = 0;
imageData.data[pixelIndex    ] = 255;  // red   color
imageData.data[pixelIndex + 1] =   0;  // green color
imageData.data[pixelIndex + 2] =   0;  // blue  color
imageData.data[pixelIndex + 3] = 255;

請(qǐng)用以下代碼讀取像素值:

var pixelIndex = 0;
var red   = imageData.data[pixelIndex    ];  // red   color
var green = imageData.data[pixelIndex + 1];  // green color
var blue  = imageData.data[pixelIndex + 2];  // blue  color
var alpha = imageData.data[pixelIndex + 3];

要訪(fǎng)問(wèn)后續(xù)像素的pixelIndex值，請(qǐng)將其值增加4（每個(gè)像素由4個(gè)數(shù)組元素組成，如上所示）。
您可以像這樣計(jì)算給定像素的索引：

 var index = 4 * (x + y * width);

的x和y在計(jì)算中是x和像素的y坐標(biāo)來(lái)計(jì)算的索引。data陣列中的像素被組織為一個(gè)長(zhǎng)像素序列，從左上方的像素開(kāi)始，垂直向右移動(dòng)。當(dāng)?shù)竭_(dá)行尾時(shí)，像素序列從下面一行的最左邊的像素繼續(xù)。因此，要計(jì)算位于x處的像素的索引，您需要將y坐標(biāo)乘以每行的像素?cái)?shù)，然后將x值添加到其中。
這是說(shuō)明20像素寬和8像素高的ImageData像素陣列的圖。在右邊距中列出了每行像素的索引。如您所見(jiàn)，索引的枚舉從左上角的0開(kāi)始，向右增加。到達(dá)線(xiàn)條的邊緣時(shí)，枚舉從下面線(xiàn)條的最左像素繼續(xù)，并向右繼續(xù)。

ImageData像素網(wǎng)格-20 x 8像素網(wǎng)格。像素從左上角向右索引，線(xiàn)下向下。

將像素復(fù)制到畫(huà)布上

完成像素處理后，可以使用2D上下文功能將其復(fù)制到畫(huà)布上putImageData()。的有兩個(gè)版本putImageFunction()。該putImageData() 函數(shù)的第一個(gè)版本將所有像素復(fù)制到畫(huà)布上。這是一個(gè)示例:

var canvasX = 25;
var canvasY = 25;

context.putImageData(imageData, canvasX, canvasY);

canvasX和canvasY參數(shù)是x和的畫(huà)布上何處插入的像素的y坐標(biāo)。
該putImageData()函數(shù)的第二個(gè)版本可以將像素的矩形而不是所有像素復(fù)制到畫(huà)布上。這是一個(gè)代碼示例:

var canvasX = 25;
var canvasY = 25;
var sx      = 0;
var sy      = 0;
var sWidth  = 25;
var sHeight = 25;

context.putImageData(imageData, canvasX, canvasY, sx, sy, sWidth, sHeight);

sx和sy參數(shù)（sourceX和sourceY）是x和矩形的左上角的y坐標(biāo)，以從像素陣列復(fù)制。
sWidth和sHeight參數(shù)（sourceWidth和sourceHeight）是該矩形的寬度和高度，以從像素陣列復(fù)制。

從canvas中獲取像素

也可以從畫(huà)布上將一個(gè)像素矩形捕獲到一個(gè)ImageData對(duì)象中。這是使用getImageData()函數(shù)完成的。這是一個(gè)示例:

var x      =  25;
var y      =  25;
var width  = 100;
var height = 100;
var imageData2 = context.getImageData(x, y, width, height);

x和y參數(shù)是從畫(huà)布矩形的左上角搶的坐標(biāo)。
的width和height參數(shù)是從畫(huà)布矩形以搶的寬度和高度。