案例一
效果图如下：
代码：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
background-color: black;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var animate={
screenW:document.documentElement.clientWidth,
screenH:document.documentElement.clientHeight,
content2d:null,
x:null,
y:null,
r:10,
hz:0,
arc:[],
//随机圆心坐标
randomloc:function(){
var x=Math.floor(Math.random()*this.screenW);
var y=Math.floor(Math.random()*this.screenH);
return[x,y]
},
//随机颜色
randomcolor:function(){
return "#" + parseInt(Math.random() * 16777216).toString(16);
},
//画圈圈
draw:function(){
this.x=this.randomloc()[0];
this.y=this.randomloc()[1];
this.content2d.beginPath();
var color=this.randomcolor();
this.content2d.strokeStyle=color;
this.content2d.arc(this.x,this.y,this.r,Math.PI*2,0);
this.content2d.stroke();
this.content2d.closePath();
this.arc.push(
[this.x,this.y,this.r,color,0]
)
},
//获取canvas
init:function(){
var canvas=document.getElementById("canvas");
canvas.width=this.screenW;
canvas.height=this.screenH;
this.content2d = canvas.getContext("2d");
},
update:function(){
for(var i=0;i<this.arc.length;i++){
this.content2d.clearRect(this.arc[i][0] - this.arc[i][2] - 1, this.arc[i][1] - this.arc[i][2] - 1, this.arc[i][2] * 2.2, this.arc[i][2] * 2.2);
this.content2d.beginPath();
var color=this.arc[i][3];
this.content2d.strokeStyle=color;
this.arc[i][2]++;
if (this.arc[i][2] > 20) {
this.arc[i][2] = 10;
this.arc[i][4]++;
if (this.arc[i][4] > 4) {
this.arc.splice(i, 1);
i--;
continue;
}
}
this.content2d.arc(this.arc[i][0], this.arc[i][1], this.arc[i][2], 0, Math.PI * 2);
this.content2d.stroke();
this.content2d.closePath();
}
}
};
animate.init();
window.requestAin=(function(){
return window.requestAnimationFrame||
webkitRequestAnimationFrame||
mozRequestAnimationFrame||
msRequestAnimationFrame||
function(e){
setTimeout(e,1000/60)
}
})();
(function loop(){
window.requestAin(loop);
animate.hz++;
if(animate.hz>4){
animate.hz=0;
animate.draw();
animate.update();
}
})();
</script>
</body>
</html>案例二
效果图如下：
代码：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
background-color: black;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var canvas=document.getElementById("canvas");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
var content2d=canvas.getContext("2d");
var balls = [];
function ball(){
//声明变量
this.x=null;
this.y=null;
this.color=null;
this.r = null;
this.Angle = null;
this.AngleX=null;
this.AngleY=null;
this.init=function(x,y){
//初始化状态
this.x=x;
this.y=y;
this.color=this.randomColor();
this.r=this.randomNum(10,25);
this.Angle=Math.random()*Math.PI*2;
this.AngleX=this.randomNum(6,12)*Math.cos(this.Angle);
this.AngleY=this.randomNum(6,12)*Math.sin(this.Angle);
};
//随机颜色
this.randomColor=function(){
return "#"+parseInt(Math.random() * 16777216).toString(16);
};
this.randomNum=function(min,max){
return Math.random()*max+min;
};
this.move=function(){
this.x+=this.AngleX;
this.y+=this.AngleY;
this.r-=0.3;
this.AngleX*=0.9;
this.AngleY*=0.9;
}
}
function removeBall(){
for(var i=0;i<balls.length;i++){
var b=balls[i];
if(b.r<0.3)
{
balls.splice(i,1);
i--;
}
}
}
function createBall(x, y) {
var count = parseInt(Math.random() * 30 + 10);
for (var i = 0; i < count; i++) {
var b = new ball();
b.init(x, y);
balls.push(b);
}
}
//画圆
function Draw(){
for(var i=0;i<balls.length;i++){
var b=balls[i];
b.move();
content2d.beginPath();
content2d.lineWidth=3;
content2d.fillStyle= b.color;
content2d.arc(b.x, b.y, b.r,0,Math.PI*2);
content2d.fill();
content2d.closePath();
}
}
loop();
function loop(){
content2d.clearRect(0,0,canvas.width,canvas.height);//清空整个canves
Draw();
removeBall();
window.requestAnimationFrame(loop);
}
canvas.onmouseup=function(e){
var x= e.pageX;
var y= e.pageY;
createBall(x,y);
}
</script>
</body>
</html>