canvas_11 requestAnimationFrame 与小球

效果图：
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8         <title>Canvas</title>
 9         <style>
10             body {
11                 margin: 0;
12             }
13 
14             canvas {
15                 border: 1px solid #aaa;
16             }
17         </style>
18     </head>
19 
20     <body>
21         <canvas id="canvas"></canvas>
22 
23         <script>
24             var canvas = document.querySelector("#canvas");
25             canvas.width = window.innerWidth;
26             canvas.height = window.innerHeight;
27             var ctx = canvas.getContext("2d");
28 
29             var id;
30             var circleArray = [];
31 
32             function Circle(x, y, dx, dy, radius) {
33                 this.x = x;
34                 this.y = y;
35                 this.dx = dx;
36                 this.dy = dy;
37                 this.radius = radius;
38 
39                 this.draw = function() {
40                     ctx.beginPath();
41                     ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
42                     ctx.strokeStyle = "blue";
43                     ctx.stroke();
44                 };
45 
46                 this.update = function() {
47                     if (this.x + this.radius > innerWidth || this.x < this.radius) {
48                         // cancelAnimationFrame(id);
49                         this.dx = -this.dx;
50                     }
51                     if (this.y + this.radius > innerHeight || this.y < this.radius) {
52                         // cancelAnimationFrame(id);
53                         this.dy = -this.dy;
54                     }
55                     this.x += this.dx;
56                     this.y += this.dy;
57 
58                     this.draw();
59                 }
60             }
61 
62             function animate() {
63                 // id 定义的时候，动画已经执行
64                 id = requestAnimationFrame(animate);
65                 ctx.clearRect(0, 0, innerWidth, innerHeight);
66                 for (var i = 0; i < circleArray.length; i++) {
67                     circleArray[i].update();
68                 }
69             }
70 
71             for (var i = 0; i < 50; i++) {
72                 var x = Math.random() * (innerWidth - radius * 2) + radius;
73                 var y = Math.random() * (innerHeight - radius * 2) + radius;
74                 var radius = 30;
75                 var dx = (Math.random() - 0.5) * 8;
76                 var dy = (Math.random() - 0.5) * 8;
77                 circleArray.push(new Circle(x, y, dx, dy, radius))
78             }
79 
80             animate();
81         </script>
82     </body>
83 
84 </html>
canvas_11 requestAnimationFrame 与 小球

canvas_11 requestAnimationFrame 与小球
