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

2022-06-14 17:03:34

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

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

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

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

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

(本文中使用的像素数据都是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];。请自己体会……

效果：