Html5游戏开发攻略(像素效果篇)
来源:互联网 发布:广联达软件有哪些 编辑:程序博客网 时间:2024/04/30 09:10
非常简单,而且网络上也有一些讲解像素效果处理的文章了,这里不多提。简单的分享一些我目前正在使用的方法。
有两种方法可以做到像素的处理。
第一:普通运算法。(适用于单像素效果处理,速度较快)
第二:卷积运算法。(适用于多像素影响计算,速度较慢但效果多变)
先放一张我们这篇所使用的原图
(本文中使用的像素数据都是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
效果:
嘛~很简单吧。
有什么问题的话~请评论留言吧!
6 0
- Html5游戏开发攻略(像素效果篇)
- Html5游戏开发攻略(API篇)
- Html5游戏开发攻略(Canvas设置篇)
- Html5游戏开发攻略(免费的音乐面包篇)
- HTML5 游戏开发---骰子游戏
- 《HTML5游戏开发实践指南》(首发)
- HTML5游戏开发之俄罗斯方块(续)
- (一)HTML5 完美游戏开发-绪论
- HTML5游戏开发工具实践(一)
- HTML5游戏开发工具实践(二)
- 轻装上阵Html5游戏开发,JEESJS(二)
- 轻装上阵Html5游戏开发,JEESJS(三)
- 轻装上阵Html5游戏开发,JEESJS(四)
- HTML5游戏开发实战
- HTML5游戏开发
- html5开发游戏总结
- html5进行游戏开发
- HTML5 游戏开发
- 构造函数与初始化列表是不同的
- oracle函数整理---Lpad函数和Rpad函数
- java preparestatment 可以重复使用
- bat截取字符串[转]
- linux中crontab定时器里的"2>&1"含义解释:
- Html5游戏开发攻略(像素效果篇)
- JS 网页快捷键设置
- centos 下安装 python 模块
- 瓉圩眄早上早蝇蝇嗢国一犄上
- 我的第十四课:jQuery - 添加元素
- find min and max -- 1.5n times for comparison
- 虚拟机下Ubuntu没有GUI图形界面,解决方法
- js类式继承的实现
- 轻松在mac上配置svn服务器