多个圆形自上向下运动效果

来源：互联网发布：免费彩票分析软件编辑：程序博客网时间：2024/05/01 01:39

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>多个圆形自上向下运动效果</title>
</head>
<body>
<canvas id="canvas" width="300px" height="400px"></canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext('2d');

function Circle(){
this.x=Math.random()*canvas.width;
this.y=-10 ;
this.r=10 ;
this.paint=function(){
context.beginPath();
context.arc(this.x,this.y,this.r,0,Math.PI*2);
context.fill();
}
this.step=function(){
this.y++;
}
}
var circles=[];
function createCircles(){
var circle=new Circle();
circles[circles.length]=circle;
}

function paintCircles(){
for(var i=0;i<circles.length;i++){
circles[i].paint();
}
}

function stepCircles(){
for(var i=0;i<circles.length;i++){
circles[i].step();
}
}

var img=new Image();
img.src="bg.jpg";

var time=0;
setInterval(function(){
context.drawImage(img,0,0);
time++;
if(time%20==0){
createCircles();
}
paintCircles();
stepCircles();
},10);
</script>
</body>
</html>

0 0