Html5游戏开发攻略(像素效果篇)

当前位置 : 首页 > 网页制作 > html5 > Html5游戏开发攻略(像素效果篇)

Html5游戏开发攻略(像素效果篇)

来源: 作者: 时间:2016-02-01 11:23
非常简单,而且网络上也有一些讲解像素效果处理的文章了,这里不多提。简单的分享一些我目前正在使用的方法。有两种方法可以做到像素的处理。第一:普通运算法。(适用于单像

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


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

第一:普通运算法。(适用于单像素效果处理,速度较快)

第二:卷积运算法。(适用于多像素影响计算,速度较慢但效果多变)



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


<喎"http://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, divisor, offset) { ///

计算卷积矩阵 /// 像素数据 /// 图像区域宽度 /// 图像区域高度 /// 矩阵 /// 除数 /// 偏移量 // 拷贝一份源数据 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) {
    /// 黑白效果(权值法)
    /// 像素数据

    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

效果:




嘛~很简单吧。

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

Tag:

相关文章

网友评论

<