Html5遊戲開發攻略（像素效果篇）

非常簡單，而且網路上也有一些講解像素效果處理的文章了，這裡不多提。簡單的分享一些我目前正在使用的方法。

有兩種方法可以做到像素的處理。

第一：普通運演算法。（適用於單像素效果處理，速度較快）

第二：卷積運演算法。（適用於多像素影響計算，速度較慢但效果多變）

先放一張我們這篇所使用的原圖

(本文中使用的像素資料都是getImageData(x,y,width,height).data)

為了方便起見，我們先定義一個卷積運算函數（此函數會直接更改傳入的ImageData像素資料）。

function convolutionMatrix(id, w, h, matrix, divisor, offset) {    /// <summary>計算卷積矩陣</summary>    /// <param name="input" type="ImageData">像素資料</param>    /// <param name="w" type="Number">映像地區寬度</param>    /// <param name="h" type="Number">映像地區高度</param>    /// <param name="matrix" type="Array">矩陣</param>    /// <param name="divisor" type="Number">除數</param>    /// <param name="offset" type="Number">位移量</param>    // 拷貝一份來源資料    var bd = new Uint8Array(id);    var m = matrix;    var cp = 0;    var wb = (w << 2);    // 對除了邊緣的點之外的內部點的 RGB 進行操作    for (var y = 1; y < h - 1; y += 1) {        for (var x = 1; x < w - 1; x += 1) {            cp = ((y * w + x) << 2);            // 如果為全透明則跳過該像素            if (id[cp + 3] == 0) continue;            // 進行計算            for (var c = 0; c < 3; c += 1) {                var i = cp + c;                id[i] = offset                    + (m[0] * bd[i - wb - 4] + m[1] * bd[i - wb] + m[2] * bd[i - wb + 4]                    + m[3] * bd[i - 4] + m[4] * bd[i] + m[5] * bd[i + 4]                    + m[6] * bd[i + wb - 4] + m[7] * bd[i + wb] + m[8] * bd[i + wb + 4])                    / divisor;            }            id[cp + 3] = bd[cp + 3];        }    }}

黑白效果濾鏡，這個效果有很多種寫法，這裡列舉2個，請你自己體會一下……：

function desaturate(data) {    /// <summary>黑白效果(權值法)</summary>    /// <param name="data" type="ImageData">像素資料</param>    var i = data.length;    while ((i -= 4) > 0) {        data[i] = data[i + 1] = data[i + 2] = (data[i] * 0.299 + data[i + i] * 0.587 +data[i + 2] * 0.114);    }}

function desaturate(data) {    /// <summary>黑白效果(平均值法)</summary>    /// <param name="data" type="ImageData">像素資料</param>    var i = data.length;    while ((i -= 4) > 0) {        data[i] = data[i + 1] = data[i + 2] = (data[i] + data[i + i] +data[i + 2]) / 3;    }}

效果（求權值法）：

反色效果濾鏡：

function inverse(data) {    /// <summary>反色效果</summary>    /// <param name="data" type="ImageData">像素資料</param>    var i = data.length;    var ff = 0xff;    while ((i -= 4) > 0) {        data[i] ^= ff;        data[i + 1] ^= ff;        data[i + 2] ^= ff;    }}

以上代碼中的 data[i] ^= ff; 也就是 data[i] ^= 0xff; 可以翻譯為   data[i] ^= 255;  繼續翻譯   data[i] = 255 - data[i];。請自己體會……

效果：

接下來的方法就要使用卷積矩陣了，因此我唯寫矩陣、除數和位移量三個參數。

模糊效果濾鏡：

[0, 1, 0,

 1, 1, 1,

 0, 1, 0]

除數:5

位移量:0

效果：

增加對比濾鏡：

[0, 0, 0,

 0, 2, 0,

 0, 0, 0]

除數:1

位移量:-255

效果：

浮雕效果濾鏡：

[1, 1, 1,

 1, .9, -1,

 -1, -1, -1]

除數:1

位移量:0

效果：

銳利化效果濾鏡：

[0, -1, 0,

 -1, 5, -1,

 0, -1, 0]

 除數:1

位移量:0

效果：

嘛~很簡單吧。

有什麼問題的話~請評論留言吧！