canvas_07 炫彩小球

效果图:

canvas_07 炫彩小球

 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             * {
11                 margin: 0;
12                 padding: 0;
13             }
14         </style>
15     </head>
16 
17     <body>
18         <canvas id="canvas"></canvas>
19 
20         <script>
21             var canvas = document.querySelector("#canvas");
22             var ctx = canvas.getContext("2d");
23             // -6是滚动条
24             var w = document.documentElement.clientWidth - 6;
25             var h = document.documentElement.clientHeight - 6;
26             canvas.width = w;
27             canvas.height = h;
28 
29             function randNum(num) {
30                 return Math.random() * num;
31             }
32 
33             function drawCricle(x, y, r, color) {
34                 ctx.beginPath();
35                 ctx.arc(x, y, r, 0, Math.PI * 2);
36                 ctx.fillStyle = color || "#000";
37                 ctx.fill();
38             }
39 
40             function Ball(x, y) {
41                 this.x = x;
42                 this.y = y;
43                 this.r = 60;
44                 this.color = "rgb(" + parseInt(Math.random() * 255) +
45                     "," + parseInt(Math.random() * 255) +
46                     "," + parseInt(Math.random() * 255) + ")";
47             }
48 
49             Ball.prototype.show = function() {
50                 this.r--;
51                 drawCricle(this.x, this.y, this.r, this.color);
52             }
53 
54             function animation() {
55                 var ballArr = [];
56                 window.onmousemove = function(e) {
57                     var ball = new Ball(e.x, e.y);
58                     ballArr.push(ball);
59                     ball.show();
60                 }
61 
62                 setInterval(() => {
63                     ctx.clearRect(0, 0, w, h);
64                     for (var i = 0; i < ballArr.length; i++) {
65                         var ball = ballArr[i];
66                         if (ball.r <= 0) {
67                             ballArr.splice(i, 1);
68                         } else {
69                             ball.show();
70                         }
71                     }
72                 }, 10);
73             }
74 
75             animation();
76         </script>
77     </body>
78 
79 </html>

 

上一篇:winows下使用sourcetree的问题


下一篇:用canvas画的一个加载条