网页上各种酷炫的粒子动画看的人眼花缭乱,实际上原理却非常简单。
获取像素信息
首先我们需要画张图到Canvas上,这里因为我懒的扣图(实际上是不会),就找了张jpeg的白底图片。实际上用png的透明图会好很多。
一定要等图片加载完再画,这很重要,可以用判断图片的complete
属性和设置onload
方法来等图片加载完才初始化。
另外绘制图片是有跨域限制的,本地看的话,要么你的图片服务器支持跨域,要么你就跑个本地服务器吧。
var img = new Image();
img.src = "images.jpeg";
if(img.complete){
init()
} else {
img.onload = function(){
init()
}
}复制代码
图片获取完之后我们就可以开始获得图片的像素信息了,接口很简单:
context.getImageData(x,y,width,height)
获得画布上指定矩形的像素数据。
ctx.drawImage(img, sx, sy);
var imgData = ctx.getImageData(sx, sy, imgW, imgH);复制代码
拿到像素数据,不要太简单好吗?! 因为这里我是把图片画在画布中间的,所以起始点不是(0,0),获得的矩形宽高则为图片的宽高。
打印出来看看数据是什么样子的。
首先返回的是个ImageData
对象,属性有data
和width,height,这还不是重点,data的类型是个Uint8ClampedArray
(此处一脸蒙逼), 看起来是个二维数组,数组里面一堆的数字是什么鬼(二脸蒙逼)。
还好有文档:
Uint8ClampedArray
对象是一个8位无符号整数的类型化数组,里面的值都是0-255。- 这堆数字代表的是rgba的值,但是每个数字只代表一个,比如说第一个数字0,代表第一个像素的R值,第二个数字0代表第一个像素的G值,第三第四个0分别代表第一个像素的B值和Alpha值,最后出来第一个像素就是个全透明的颜色,第五个数字就代表第二个像素的R值了。
实际上,图像是二维的,是由height决定行数,width决定列像素的行列式。
做粒子动画首先需要把图片粒子化,把位置给找准,这样出来的东西才不会是乱七八糟的,所以我们拿到每个点的位置信息保存下来就可以了。
for(var x=0; x<imgData.width; x+=6) {
for(var y=0; y<imgData.height; y+=6) {
var i = (y*imgData.width + x) * 4;
if(imgData.data[i+3] > 128 && imgData.data[i] < 100){
var dot = new Dot(x, y, 2);
dotList.push(dot);
}
}
}复制代码
两重循环就不说了,这里有几个地方简单解释一下:
- 循环条件中有个
x+=6
,y+=6
这里为什么不是1呢?因为是做粒子化,每个点之间需要有一些空隙才看的出来,所以不用每个点都拿,隔一段距离拿一个点就可以了,这里的6有点类似于取样的概念。 - 内侧循环有个if判断语句,
[i+3]
指的是像素中Alpha的值,大于128是用于过滤掉一些透明像素的。后面那个imgData.data[i] < 100
因为我用的是个白底黑字的jpeg文件,所以还需要把不像黑色的像素过滤掉,因为大都只有黑白两色,所以就简单判断了R值小于100,所以就像之前说的,还是用png图片比较好。 - Dot对象是用来保存每取样的个像素点信息的,这里我只保存了x,y信息,第三个参数是半径的值,这里就直接写死了2,实际上还可以考虑保存像素点的rgba信息以及半径做个随机数。
function Dot(centerX, centerY, radius) {
this.x = centerX;
this.y = centerY;
this.radius = radius;
}复制代码
最后一步就是把保存下来的信息画到Canvas上。
function draw(){
var imgW = img.width,
imgH = img.height,
sx = winWidth/2-imgW/2,
sy = winHeight/2-imgH/2;
ctx.clearRect(0, 0, winWidth, winHeight);
ctx.fillStyle = "#000";
for(var i=0; i<dotList.length; i+=1){
curDot = dotList[i];
ctx.save();
ctx.beginPath();
ctx.arc(sx+curDot.x, sy+curDot.y, curDot.radius, 0, 2*Math.PI);
ctx.fill();
ctx.restore();
}
}复制代码
最后出来的效果:
粒子化基本就写到这里,下篇讲讲用粒子化的东西做动画吧,最近事情比较多,懒癌又犯了。
源码地址: github.com/bob-chen/ca…
Part 2 地址:gold.xitu.io/post/57dd27…
Part 3 地址: gold.xitu.io/post/57e7a7…
参考
www.w3school.com.cn/tags/canvas…