第一次写canvas相关的脚本,点击页面可以产生新的扩散点,并整体颜色变换,可以根据输入数字变换粒子大小,
预览地址:http://runjs.cn/code/58mct5yo
<!-- lang: js -->
/*
*@author-fanqie dc2002007@163.com */ window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); var openBtn=document.getElementById('J_open_btn'); var clearBtn=document.getElementById('J_clear_btn'); var runState=true; //打开关闭 openBtn.addEventListener("click",function(e){ thisBtn=e.target; if(runState==false){ runState=true; thisBtn.innerHTML="停止"; }else{ runState=false; thisBtn.innerHTML="继续"; } }); //J_clear_btn clearBtn.addEventListener("click",function(e){ liziDrawObj.destory(); runState=true; thisBtn.innerHTML="停止"; }); var mycanvas=document.getElementById('I_mycanvas'); mycanvas.height=window.innerHeight; mycanvas.width=window.innerWidth; var colors=['#00FF00','#FFFF00','#FF0000','#00CCFF']; var liziDrawClass=function(canvasObj,direction,directionVal,size,color){ this.canvasObj=canvasObj.getContext("2d"); this.direction=direction;//left top bottom right this.directionVal=directionVal;//偏移量 this.size=size; this.color=color; this.liziItem=Array();//粒子对象集合 } liziDrawClass.prototype={ //初始化 init:function(){ liziDrawObj.factory(250,200); this.canvasObj.shadowColor=this.color; this.canvasObj.fillStyle=this.color; this.canvasObj.globalAlpha=this.size; this.canvasObj.shadowBlur=5; this.canvasObj.save(); }, //渲染画布 drawDraw:function(lizi){ this.canvasObj.beginPath();
this.canvasObj.arc(lizi.positionX,lizi.positionY,this.size,0,2*Math.PI);
this.canvasObj.fill();
this.canvasObj.closePath();
this.canvasObj.restore();
},
//更新画布
update:function(){
for(index in liziDrawObj.liziItem){
liziDrawObj.liziItem[index]=liziDrawObj.createNew(liziDrawObj.liziItem[index],5);
var liziList= liziDrawObj.liziItem[index];
for(current in liziList){
lizi=liziList[current];
//liziDrawObj.canvasObj.clearRect(0,0,window.innerWidth,window.innerHeight);
liziDrawObj.drawDraw(lizi);
}
}
},//同时创建多个新粒子 为了加快粒子产生速度
createNew:function(liziList,count){
lastLizi=liziList.pop();
liziList=Array();
liziList.push(lastLizi);
for (var i = 0; i <count; i++) {
lastLizi=liziList[liziList.length-1];
var liziNew=new liziClass(lastLizi.size,
lastLizi.color,
lastLizi.direction,
lastLizi.positionX,
lastLizi.positionY,
lastLizi.directionVal);
liziNew.centerX=lastLizi.centerX;
liziNew.centerY=lastLizi.centerY;
liziNew.angle=lastLizi.angle+0.15;
liziNew.directionVal=lastLizi.directionVal+0.05;
cx= liziNew.centerX+Math.sin(liziNew.angle) * liziNew.directionVal;
cy= liziNew.centerY+Math.cos(liziNew.angle) * liziNew.directionVal;
liziNew.positionX=cx+Math.random();
liziNew.positionY=cy+Math.random()*5;
liziList.push(liziNew);
};
return liziList;
},
//生产粒子model
factory:function(positionX,positionY){
var lizi=new liziClass(this.size, this.color,this.direction,positionX,positionY,this.directionVal);
this.liziItem.push([lizi]);
this.color=colors[parseInt(Math.random()*4,10)];
this.canvasObj.shadowColor=this.color;
this.canvasObj.fillStyle=this.color;
this.canvasObj.save();
},destory:function(){
this.canvasObj.clearRect(0,0,window.innerWidth,window.innerHeight);
this.liziItem=new Array();
}
} var liziClass=function(size,color,movement,positionX,positionY,directionVal){ this.size=size; this.color=color; this.movement=movement; this.positionX=positionX; this.positionY=positionY; this.centerX=Number(positionX)-directionVal; this.centerY=Number(positionY)-directionVal; this.angle=0; this.directionVal=directionVal;//偏移量 }
liziClass.prototype={}
var liziDrawObj=new liziDrawClass(mycanvas,'left',10,1,'#f0e');
liziDrawObj.init();
function loop(){
if(runState){
liziDrawObj.size=document.getElementById('J_size').value;
liziDrawObj.update();
}
requestAnimFrame(loop);
}
mycanvas.addEventListener("click",newPosition);
function newPosition(e){
if(runState){
liziDrawObj.factory(e.x,e.y);
}
}
loop();
<!-- lang: html -->
<a href="javascript:;" id="J_open_btn">停止</a>
<a href="javascript:;" id="J_clear_btn">清空</a> 粒子大小<input value="1" id="J_size" class="sizeInput" /> <canvas id="I_mycanvas" class="mycanvas" > 不支持…… </canvas>
<!-- lang: css -->
.mycanvas{background: #000}
body{background: #eee}
.sizeInput{width: 2em;font-size:15px; }