代码如上,逻辑就是在指定的ele元素上,创建一个canvas标签,高宽同ele元素,在这个画布上绘制雪花、彩带或者星星图片,根据动画函数requestAnimationFrame函数以及预先定义好的x,y轴方向的速度,进行一帧一帧的绘制,每一帧的x,y坐标发生变化,进行产生动画效果。星星的图片为
调用方式如下:
1、星星
window.canvasEffect({ ele : document.getElementsByTagName("body")[0] , type : "star" , particleMax : 300 , particleCount : 150 , vy : 0.3 , vyFloat : 0.3 , vx : 0.3 , vxFloat : 0.6 , o : 0.3 , oFloat : 0.3 , });
效果图为:
2、彩带