2019年的第三篇文章 今天来讲一下canvas特效
1.获取canvas画布像素点信息
很多人很好奇这个imageData是什么,其实就是canvas画布里面每个像素点信息,4个为一组[r,g,b,a],代表该像素点的颜色和opacity.
2.收集像素点信息并重新赋值
上述pixels是对每个像素点的描述,x,y是对应的在画布中的坐标值,fillStyle是填充改点的色值。
3.利用requestAnimationFrame实现粒子效果
4.利用这个属性我们可以做一个简单的颜色选择器
是不是超级简单, 原来所谓的取色器不过如此。。。
5.利用色值平均将图片置灰
原来置灰的操作就是将rgb求平均值。
6.下面看一个稍微进阶的点的
上述就实现了一个文字打印的效果,其实不难,思路就是收集相同x坐标的像素点,不断增加x的值去重绘。
7.最后一个例子,利用该特性求面积
最后在这个 递归回溯算法我看了20分钟才算完全理清头绪,希望大家好好看看这里,其他并无难度。