用canvas来实现文字图片粒子化

看了岑安大大的教程http://www.cnblogs.com/hongru/archive/2012/03/28/2420415.html后,让我见识到了canvas操控像素能力的强大,也就自己试着做了一下。发现如此好玩的效果也正如岑安大大所说的一样,事情没有想象中那么难。

要做出这样的效果,只需要懂的使用canvas的getImgData()就行了。该方法能够复制画布上指定矩形的像素数据,用法很简单:

就酱紫就可以获取到imgData。imgData是获取到的像素信息,具体如下

对于 ImageData 对象中的每个像素,都存在着四方面的信息,即 RGBA 值:

  • R - 红色 (0-255)
  • G - 绿色 (0-255)
  • B - 蓝色 (0-255)
  • A - alpha 通道 (0-255; 0 是透明的,255 是完全可见的)

只要是有前端编程经验的,都肯定知道rgba了,而获取到的imgData就是一个存放着制定矩形中所有像素数组的数组,第一个像素的R是imgData[0],G是imgData[1],B是imgData[2],A则是imgData[3],第二个像素的R是imgData[4],G是imgData[5],B是imgData[6],A则是imgData[7]。。。以此类推。然后,既然我们已经获取到了所有像素里的rgba参数了,我们也就可以很简单的对这些参数进行更改,然后再将更改后的imgData通过putImageData()方法贴到画布上。像素处理完毕。就是如此简单。

知道如何获取像素数据后,接下来就可以开搞了~~~关键代码就下面这些:

获取到imgData后,通过两个循环,获得透明度大于128的,也就是有颜色的像素,然后实例化一个粒子对象,存入一个粒子数组中保存,以下是粒子对象代码:

为了让小圆扩散有3D的空间感,所以还引入了Z轴,也就是把3维平面化成二维,具体我就不多说了。可以直接戳http://www.cnblogs.com/hongru/archive/2011/09/12/2174187.html   我就是看着岑安大大的教程学的。3D效果也做好后,就做动画,随机出一个坐标,让粒子先呆在那个坐标,然后通过保存的位置再聚合,然后再随机出坐标再分散,就是这个动画的原理了。

下面贴出所有代码:

技术不是很好,代码写的不好请见谅。不过应该不难理解。知道文字如何粒子化后,图片也就一样的做法了。

源码地址:https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Particle-demo/imgdata

补充一点:过于复杂的图片不适合粒子化,因为对象过多时,对浏览器的造成很大的负荷,动画效果也就会变得很卡很卡了。一般一千个粒子左右比较合适,自己就根据图片复杂度调整粒子的大小,减少粒子数量就行了。

  • 我的微信
  • 我的微信扫一扫
  • weinxin
  • 我的QQ
  • 我的QQ扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: