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; }