HTML5高级编程之像素处理及粒子效果
HTML5中的像素处理,需要用到getImageData和putImageData两个函数,先用getImageData复制canvas画布中的像素数据,然后对获取的像素数据进行处理,最后再通过putImageData将处理完的数据粘贴到canvas画布。我们不妨把中间处理像素的过程称作像素的批处理,由于像素的复制和粘贴是两个比较费时的过程,为了更高效的对像素进行处理,我们应该在一次批处理过程中尽可能处理更多的像素数据,来减少像素的复制和粘贴这两个操作。
这听起来似乎是一个相当麻烦的过程,可能有些朋友光是看到上面的几句话估计就已经开始不耐烦了,其实我也是这么认为的,所以我把这一麻烦的过程封装到了lufylegend引擎中的LBitmapData类中,你可以像处理flash的像素一样处理HTML5中的canvas,这听起来是不是很有趣?如果你有兴趣,那么请跟着我一起来看一下这个好玩儿的小功能。
首先,来认识一下LBitmapData,它通常是用来保存Image对象的,具体用法我就不多说了,大家可以看一下API文档。这里我主要介绍一下如何用它来批量处理像素。
下面是LBitmapData中的两个函数
这听起来似乎是一个相当麻烦的过程,可能有些朋友光是看到上面的几句话估计就已经开始不耐烦了,其实我也是这么认为的,所以我把这一麻烦的过程封装到了lufylegend引擎中的LBitmapData类中,你可以像处理flash的像素一样处理HTML5中的canvas,这听起来是不是很有趣?如果你有兴趣,那么请跟着我一起来看一下这个好玩儿的小功能。
首先,来认识一下LBitmapData,它通常是用来保存Image对象的,具体用法我就不多说了,大家可以看一下API文档。这里我主要介绍一下如何用它来批量处理像素。
下面是LBitmapData中的两个函数
函数 | 功能 |
---|---|
getPixel(x,y,colorType)
【HTML5高级编程之像素处理及粒子效果】相关文章 3. 为什么JavaScript有能力成为未来企业级编程语言? 4. 《HTML5编程之旅》:Communication 技术初探 7. canvas 像素级碰撞 8. HTML5、CSS3应用教程之 跟DIV说Bey!Bey! 10. 征服高级CSS选择器 本文来源:https://www.51html5.com/a706.html
上一篇:jQuery实现响应HTML5表单
下一篇:HTML5 新增结构元素
﹝HTML5高级编程之像素处理及粒子效果﹞相关内容
「HTML5高级编程之像素处理及粒子效果」相关专题其它栏目也许您还喜欢 |