使用H5canvas绘制多个自上而下运动效果案例 

 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>

 

posted @ 2017-08-16 21:37  青涩的柠檬酸  阅读(616)  评论(0)    收藏  举报