canvas绘图粒子扩散效果

原创内容 转发请标明出处 

第一次写canvas相关的脚本，点击页面可以产生新的扩散点，并整体颜色变换，可以根据输入数字变换粒子大小，

预览地址：http://runjs.cn/code/58mct5yo

JS

  1 /*
  2  *@author-fanqie dc2002007@163.com
  3  */
  4 window.requestAnimFrame = (function(){
  5   return  window.requestAnimationFrame       ||
  6           window.webkitRequestAnimationFrame ||
  7           window.mozRequestAnimationFrame    ||
  8           function( callback ){
  9             window.setTimeout(callback, 1000 / 60);
 10           };
 11 })();
 12 var openBtn=document.getElementById('J_open_btn');
 13 var clearBtn=document.getElementById('J_clear_btn');
 14 var runState=true;
 15 //打开关闭
 16 openBtn.addEventListener("click",function(e){
 17     thisBtn=e.target;
 18     if(runState==false){
 19         runState=true;
 20         thisBtn.innerHTML="停止";
 21     }else{
 22         runState=false;
 23         thisBtn.innerHTML="继续";
 24     }
 25 });
 26 //J_clear_btn
 27 clearBtn.addEventListener("click",function(e){
 28    liziDrawObj.destory();
 29    runState=true;
 30    thisBtn.innerHTML="停止";
 31 });
 32 var mycanvas=document.getElementById('I_mycanvas');
 33 mycanvas.height=window.innerHeight;
 34 mycanvas.width=window.innerWidth;
 35 var colors=['#00FF00','#FFFF00','#FF0000','#00CCFF'];
 36 var liziDrawClass=function(canvasObj,direction,directionVal,size,color){
 37     this.canvasObj=canvasObj.getContext("2d");
 38     this.direction=direction;//left top bottom right
 39     this.directionVal=directionVal;//偏移量
 40     this.size=size;
 41     this.color=color;
 42     this.liziItem=Array();//粒子对象集合
 43 }
 44 liziDrawClass.prototype={
 45     //初始化
 46     init:function(){
 47         liziDrawObj.factory(250,200);
 48         this.canvasObj.shadowColor=this.color;
 49         this.canvasObj.fillStyle=this.color;
 50         this.canvasObj.globalAlpha=this.size;
 51         this.canvasObj.shadowBlur=5;
 52         this.canvasObj.save();
 53     },
 54     //渲染画布
 55     drawDraw:function(lizi){
 56         this.canvasObj.beginPath();
 57         
 58        
 59         this.canvasObj.arc(lizi.positionX,lizi.positionY,this.size,0,2*Math.PI);
 60         this.canvasObj.fill();
 61         this.canvasObj.closePath();
 62         this.canvasObj.restore();
 63     },
 64     //更新画布
 65     update:function(){
 66             for(index in liziDrawObj.liziItem){
 67                
 68                 liziDrawObj.liziItem[index]=liziDrawObj.createNew(liziDrawObj.liziItem[index],5);
 69                 var liziList= liziDrawObj.liziItem[index];
 70                 for(current in liziList){
 71                     lizi=liziList[current];
 72                     
 73                     //liziDrawObj.canvasObj.clearRect(0,0,window.innerWidth,window.innerHeight);
 74                     liziDrawObj.drawDraw(lizi);
 75                 }
 76             }
 77     },//同时创建多个新粒子 为了加快粒子产生速度 
 78     createNew:function(liziList,count){
 79         lastLizi=liziList.pop();
 80         liziList=Array();
 81         liziList.push(lastLizi);
 82         for (var i = 0; i <count; i++) {
 83             lastLizi=liziList[liziList.length-1];
 84             
 85             var liziNew=new liziClass(lastLizi.size,
 86                 lastLizi.color,
 87                 lastLizi.direction,
 88                 lastLizi.positionX,
 89                 lastLizi.positionY,
 90                 lastLizi.directionVal);
 91                 liziNew.centerX=lastLizi.centerX;
 92                 liziNew.centerY=lastLizi.centerY;
 93                 liziNew.angle=lastLizi.angle+0.15;
 94                 liziNew.directionVal=lastLizi.directionVal+0.05;
 95                 cx= liziNew.centerX+Math.sin(liziNew.angle) * liziNew.directionVal;
 96                 cy= liziNew.centerY+Math.cos(liziNew.angle) * liziNew.directionVal;
 97                 liziNew.positionX=cx+Math.random();
 98                 liziNew.positionY=cy+Math.random()*5;
 99                 liziList.push(liziNew);
100         };
101        
102         return liziList;
103     },
104     //生产粒子model
105     factory:function(positionX,positionY){
106         var lizi=new liziClass(this.size, this.color,this.direction,positionX,positionY,this.directionVal);
107         this.liziItem.push([lizi]);
108        this.color=colors[parseInt(Math.random()*4,10)];
109         this.canvasObj.shadowColor=this.color;
110         this.canvasObj.fillStyle=this.color;
111         this.canvasObj.save();
112     },destory:function(){
113         this.canvasObj.clearRect(0,0,window.innerWidth,window.innerHeight);
114         this.liziItem=new Array();
115     }
116   
117 
118 }
119  var liziClass=function(size,color,movement,positionX,positionY,directionVal){
120         this.size=size;
121         this.color=color;
122         this.movement=movement;
123         this.positionX=positionX;
124         this.positionY=positionY;
125         this.centerX=Number(positionX)-directionVal;
126         this.centerY=Number(positionY)-directionVal;
127         this.angle=0;
128         this.directionVal=directionVal;//偏移量
129     }
130 
131 liziClass.prototype={}
132 
133 
134     var liziDrawObj=new liziDrawClass(mycanvas,'left',10,1,'#f0e');
135     liziDrawObj.init();
136     
137     function loop(){
138         if(runState){
139             liziDrawObj.size=document.getElementById('J_size').value;
140             liziDrawObj.update();
141         }
142         requestAnimFrame(loop);
143 
144     }
145     mycanvas.addEventListener("click",newPosition);
146     function newPosition(e){
147         if(runState){
148             liziDrawObj.factory(e.x,e.y);
149         }
150     }
151     loop();

HTML

1     <a href="javascript:;" id="J_open_btn">停止</a>
2     <a href="javascript:;" id="J_clear_btn">清空</a>
3     粒子大小<input value="1" id="J_size" class="sizeInput" />
4     <canvas id="I_mycanvas" class="mycanvas" >
5         不支持……
6     </canvas>

1 .mycanvas{background: #000}
2 body{background: #eee}
3 .sizeInput{width: 2em;font-size:15px; }　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

转载于:https://www.cnblogs.com/bravetomato/p/3895415.html