您的位置：首页 > 其它

Canvas气泡动画效果和多个球体上下运动（之前的改进）

2017-03-09 19:24 316 查看

<!doctype html>

<head>

<meta charset="UTF-8">

<meta name="Author" content="郭晅自">

<title>canvas多个球体上下运动</title>

</head>

<body>
<canvas id="canvas" width="400px" height="300px"></canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var circleMove = {
Time : 20,

STATUS_DOWN : 0,
STATUS_UP : 1,

circles : [],
//初始化
init : function(){
var img = new Image();
img.src="bg.jpg";

setInterval(function(){
ctx.drawImage(img,0,0,400,300);
if(circleMove.Time%0.5 == 0){
circleMove.createCircles();
}
circleMove.paintCircles();
/*如要上下运动效果，解开circleMove.setStatus(); 再把circleMove.changeOpacity();注释掉*/
//circleMove.setStatus();
circleMove.circlesStep();
circleMove.changeOpacity();
circleMove.Time++;
},50);
},
// 定义函数 - 创建圆形对象
createCircles : function(){
var cir = new circle();
this.circles.push(cir);
},
// 定义函数 - 绘制所有圆形
paintCircles : function(){
for(var i=0;i<this.circles.length;i++){
this.circles[i].createCircle();
}
},
// 定义函数 - 控制所有圆形运动
circlesStep : function(){
for(var i=0;i<this.circles.length;i++){

if(this.circles[i].Status == 0){
this.circles[i].moveDown();
}else{
this.circles[i].moveUp();
}
}
},
// 定义函数 - 控制所有球体的透明度
changeOpacity : function(){
for(var i=0;i<this.circles.length;i++){

this.circles[i].inVisible();
}
},
/*设置球体状态，如果在超出画面范围，则向上运动*/
setStatus : function(){
for(var i=0;i<this.circles.length;i++){
if(this.circles[i].y+this.circles[i].r>canvas.height){
this.circles[i].y = canvas.height-this.circles[i].r;
this.circles[i].Status = this.STATUS_UP;
}else if(this.circles[i].y-this.circles[i].r<0){
this.circles[i].y = this.circles[i].r;
this.circles[i].Status = this.STATUS_DOWN;
}
}
}
}
// 定义球体构造函数
function circle(){
this.x = Math.random()*canvas.width;
this.y = -10;
this.r = Math.random()*20+5;
this.Status = 0,
this.red = Math.floor(Math.random()*256)+150;
this.green = 100;
this.blue = 0;
this.opacity = .8;
this.createCircle = function(){
ctx.fillStyle = "rgba("+this.red+","+this.green+","+this.blue+","+this.opacity+")";
ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
ctx.fill();
}
this.moveDown = function(){
this.y+=10;
}
this.moveUp = function(){
this.y=this.y-10;
}
this.inVisible = function(){
this.opacity=this.opacity-0.05;
}
}
//执行
circleMove.init();
</script>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航