HTML5 canvas文本應(yīng)用 像素數(shù)據(jù)

    canvas API最有用的特性之一是，允許開發(fā)人員直接訪問canvas底層像素數(shù)據(jù)。這種數(shù)據(jù)訪問是雙向的：一方面，可以以數(shù)值數(shù)組的形式獲取像素數(shù)據(jù)；另一方面，可以修改數(shù)組的値以將其應(yīng)用于canvas上。實際上，也可以通過直接調(diào)用像素數(shù)據(jù)的相關(guān)方法來控制canvas。這要歸功于context API內(nèi)置的三個函數(shù)。

    第一個函數(shù)是context.getlmageDat:a(sx, sy, sw, sh),它返回當(dāng)前canvas狀態(tài)，并以數(shù)值數(shù)組的方式顯示。具體來說，返回的對象包括三個屬性：

    width：每行有多少個像素。

    height：每列有多少個像素。

    data：一維數(shù)組，存有從canvas獲取的每個像素的RGBA值。該數(shù)組為每個像素保存了四個值——紅、綠、藍和alpha透明度，每個值都在0?255之間。因此，canvas上的每個像素都在這個數(shù)組中變成了四個整數(shù)值。數(shù)組的填充順序是從左到右，從上到下，也就是先第一行，再第二行，依此類推。

    getlmageData函數(shù)有四個參數(shù)，該函數(shù)只返回這四個參數(shù)所限定的區(qū)域內(nèi)的數(shù)據(jù)。只有被x、 y、width和height四個參數(shù)框定的矩形區(qū)域內(nèi)的canvas上的像素才會被取到。因此要想獲取所有像素數(shù)據(jù)，就需要這樣傳入?yún)?shù):getlmageData(0, 0, canvas.width, canvas.height)。

    因為每個像素由四個圖像數(shù)據(jù)表示，所以要計算指定的像素點對應(yīng)的值是什么就有點兒頭疼。

    不要緊，下面有公式。

    在設(shè)定了width和height的canvas上，在坐標(biāo)(x, y)上的像素的構(gòu)成如下：

    紅色部分:((width * y) + x) * 4。

    綠色部分:((width * y) + x) * 4 + 1。

    藍色部分:((width * y) + x) * 4 + 2。

    透明度部分:((width * y) + x) * 4 + 3。

    一旦可以通過像素數(shù)據(jù)的方式訪問對象，就可以通過數(shù)學(xué)方式輕松修改數(shù)組中的像素值，因為這些值都是0?255的簡單數(shù)字。修改了任何像素的紅、綠、藍和alpha值之后，可以通過第二個函數(shù)來更新canvas上的顯示，IP就是context.putlmageData(imagedata，dx，dy)。

    putlmageData允許開發(fā)人貝傳入一組圖像數(shù)據(jù)，其格式與最初從canvas上獲取來的是一樣的。這個函數(shù)使用起來非常方便，因為可以直接用從canvas上獲取數(shù)據(jù)加以修改，然后返回。一旦這個函數(shù)被調(diào)用，所有新傳入的圖像數(shù)據(jù)值就會立即在canvas上更新顯示出來。dx和dy參數(shù)可以用來指定偏移量。如果使用，則該函數(shù)就會跳到指定的canvas位置去更新顯示傳進來的像素數(shù)據(jù)。

    最后，如果想預(yù)先生成一組空的canvas數(shù)據(jù)，則可調(diào)用context,createlmageData(sw，sh), 這個函數(shù)可以創(chuàng)建一組圖像數(shù)據(jù)并綁定在canvas對象上。這組數(shù)據(jù)可以像先前那樣處理，只是在獲取canves數(shù)據(jù)時，這組圖像數(shù)據(jù)不一定會反映canvas的當(dāng)前狀態(tài)。