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>