canvas简单实现图片的粒子动画

试想一下,一张图片怎样取得每个像素点,在每个像素点上绘制一个粒子(圆)呢?或者说记录上每个像素点的位置?-----canvas提供了一种方法getImageData,我们来假设一个场景,首先是一张800X600的canvas画布,这张画布默认是白色的背景图,然后有一张600X400的png图片;那么首先的代码就应该是:

var canvas=document.getElementById("myCanvas");//获取canvas画布

var ctx=canvas.getContext("2d");//声明这个画布是2d
ctx.clearRect(0,0,canvas.width,canvas.height);//绘制之前先清空画布
var image = new Image();
image.src='201702081110069.png';//创建一张图片,并声明路径

现在的图片已经放上去了,但是还没有加载出来,更没有绘制到画布上,所以接下来就是要先让图片加载完成,然后绘制到画布上:

var imgData = null;
        image.onload = function(){//在图片加载完成后
            ctx.drawImage(image,0,0,400,400);//将图片绘制到画布上
            imgData=ctx.getImageData(0,0,400,400); //获取图表像素信息
        }

关键代码来了,getImageData里面就存储了我们需要的信息,那么我们就遍历这张图片的宽(600)和高(400),我们就能拿到整张图片的每个像素点,那么,透明部分我们就过滤掉!

            var pos=0;
            var data=imgData.data;    //RGBA的一维数组数据
            var nowNum=0;
            for(var i=1;i<=imgData.height;i++){
                for(var j=1;j<=imgData.width;j++){//遍历宽高
                    pos=(i-1)*imgData.width+(j-1); //取得像素位置
                    if(data[pos*4]>0){//开始过滤
                        var onePix= new Yuan(100,j,i);//创建一个圆,并把现在的宽高像素传递过去
                        copyPixels.push(onePix);//把创建好的圆放进一个数组里面
                    }
                }
            }
            //下面是圆的构造函数
            function Yuan(distance,j=rd(50,400),i=rd(50,400)){

                this.x = j; //当前J就是X轴的坐标, --->绘制时的实时位置
                this.y = i;//当前的i就是Y轴的坐标
                this.targetX = 0;//将要去的粒子位置
                this.targetY = 0;
                this.color = '#bbb';//定义粒子的颜色(其实在上面的遍历是可以拿到本身的颜色的,偷懒)
            }

当然,这只是阐述了方法,授人以鱼不如授人以渔.但是,相信很多同僚都是过来直接找代码赋值粘贴的,所以还是不多说了,上代码吧,有三张 png的透明背景图(非透明图生成的粒子会很多影响性能)和swiper插件,替换一下即可.

    
    
    
    
    
    


浏览器不支持canvas

    

        
Slide 1
        
Slide 2
        
Slide 3