您的位置：首页 > Web前端 > JavaScript

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

2017-03-14 15:23 218 查看

<!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(){

4000

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>

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

标签： Javascript cavas

相关文章推荐

新的分享

章节导航