<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas id="bubble"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('bubble');
var w = window.innerWidth;
var h = window.innerHeight
canvas.width=w;
canvas.height=h;
window.onresize=function(){
w = window.innerWidth;
h = window.innerHeight
canvas.width=w;
canvas.height=h;
}
var canCon=canvas.getContext('2d');
// var y=100,x=100;
// setInterval(function(){
// canCon.clearRect(0,0,w,h);
// canCon.beginPath();
// canCon.fillStyle='red';
// canCon.arc(200,y++,100,0,Math.PI*2)
// canCon.fill();
// },1000/60);
function random(min,max){
return Math.random()*(max-min)+min;
}
var colorArray = ['#e08031','#c7ceb2','#199475','#0b6e48','#044d22'];
function Bubble(){};
var bubble =new Bubble();
Bubble.prototype={//定义属性
init:function(){//所有泡泡的基本零件
this.x=random(0,w);//浏览器的最左边到最右边
this.y=random(0,h);//浏览器的最左边到最右边
this.r=random(0,2);//http://www.peise.net/颜色
this.color=colorArray[Math.floor(random(0,5))];
this.xr=random(-1,1);
this.yr=random(-1,1);
this.D=50;
},
draw:function(){
canCon.beginPath();
canCon.fillStyle=this.color;
canCon.arc(this.x,this.y,this.r,0,Math.PI*2)
canCon.fill();
},
update:function(){
this.x+=this.xr;
this.y+=this.yr;
if(this.x-this.r<0 || this.x+this.r>w){
this.xr = -this.xr;
}else if(this.y-this.r<0 || this.y+this.r>h){
this.yr = -this.yr;
}
this.xD= (positionX-this.x<0)?-(positionX-this.x):(positionX-this.x); //小球和鼠标的位置距离
this.yD= (positionY-this.y<0)?-(positionY-this.y):(positionY-this.y); //小球和鼠标的位置距离
if(this.xD<this.D&&this.yD<this.D){
this.r+=1;
if(this.r>100){this.r=100};
}else if(this.r>4&&this.xD>this.D&&this.yD>this.D){
this.r-=1;
}
this.draw();
}
}
var bublleArray = [];
function create(){
var bubble =new Bubble();//shengcheng
bubble.init();//小泡泡的样子
bubble.draw();
bublleArray.push(bubble);//一出生就保存
}
for(var i=0;i<10000;i++){
create();
}
setInterval(function(){
canCon.clearRect(0,0,w,h);
for(var b of bublleArray){
b.update();
}
},1000/60);
var positionX,positionY;
canvas.onmousemove=function(){
var ev = ev || window.event;
positionX=ev.clientX;
positionY=ev.clientY;
positionX=ev.clientX;
}
//春函数就是只进行计算
</script>
</body>
</html>