Html5游戏开发攻略（像素效果篇）

非常简单，而且网络上也有一些讲解像素效果处理的文章了，这里不多提。简单的分享一些我目前正在使用的方法。

有两种方法可以做到像素的处理。

第一：普通运算法。（适用于单像素效果处理，速度较快）

第二：卷积运算法。（适用于多像素影响计算，速度较慢但效果多变）

先放一张我们这篇所使用的原图

喎?https: www.2cto.com/kf/ware/vc/"="" target="_blank" class="keylink">vcd4kpha+pgjypgo8l3a+cjxwpjxicj4kpc9wpgo8cd48yni+cjwvcd4kpha+klg+zstw0mq508o1xm/xy9jk/b7dtrzkx2dldeltywdlrgf0ysh4lhksd2lkdggsagvpz2h0ks5kyxrhktwvcd4kpha+pgjypgo8l3a+cjxwps6qwcu3vbhjxvc8+6osztldx8/itqjs5dk7upa+7bv91mvl47qvyv2jqltluq/k/bvh1rg907j8ums0q8jrtcrjbwfnzurhdghp8cvyyv2+3aopoam8l3a+cjxwpjxwcmugy2xhc3m9"brush:java;">function convolutionmatrix(id, w, h, matrix, pisor, offset) { ///

计算卷积矩阵

/// 像素数据 /// 图像区域宽度 /// 图像区域高度 /// 矩阵 /// 除数 /// 偏移量 // 拷贝一份源数据 var bd = new uint8array(id); var m = matrix; var cp = 0; var wb = (w

黑白效果滤镜，这个效果有很多种写法，这里列举2个，请你自己体会一下……：

function desaturate(data) {
    /// 黑白效果(权值法)
    /// 像素数据

    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) {
    /// 黑白效果(平均值法)
    /// 像素数据

    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) {
    /// 反色效果
    /// 像素数据

    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

效果：

嘛~很简单吧。

有什么问题的话~请评论留言吧！

喎?https:>