1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>多个图形自上向下</title>
6 </head>
7 <body>
8 <canvas id="canvas" width="300px" height="400px"></canvas>
9 <script>
10 var canvas = document.getElementById("canvas");
11 var context = canvas.getContext("2d");
12 /*
13 * 利用javascript面向对象的内容
14 * * 圆形 - 对象
15 * * {}
16 * * new Object()
17 * * function 构造器(){}
18 */
19 function Circle(){
20 this.x = Math.random()*canvas.width;
21 this.y = -10;
22 this.r = 10;
23 // 绘制圆形方法
24 this.paint = function(){
25 context.beginPath();
26 context.arc(this.x,this.y,this.r,0,Math.PI*2);
27 context.fill();
28 }
29 // 控制圆形移动方法
30 this.step = function(){
31 this.y++;
32 }
33 }
34 //var circle = new Circle();
35 var circles = [];
36 // 定义函数 - 创建圆形对象
37 function createCircles(){
38 var circle = new Circle();
39 circles[circles.length] = circle;
40 }
41 // 定义函数 - 绘制所有圆形
42 function paintCircls(){
43 for(var i=0;i<circles.length;i++){
44 circles[i].paint();
45 }
46 }
47 // 定义函数 - 控制所有圆形运动
48 function stepCircles(){
49 for(var i=0;i<circles.length;i++){
50 circles[i].step();
51 }
52 }
53
54 var myimg = new Image();
55 myimg.src = "../第二天/images/spjt.png";
56
57 var time = 0;
58 setInterval(function(){
59 context.drawImage(myimg,0,0);
60 time++;
61 if(time%20==0){
62 createCircles();
63 }
64 paintCircls();
65 stepCircles();
66 },10);
67 </script>
68 </body>
69 </html>
