canvas_07 炫彩小球

2021-12-27 02:03:53 阅读：207 来源： 互联网

标签：function canvas ball 07 炫彩 ctx var Math

效果图：

 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>

标签：function,canvas,ball,07,炫彩,ctx,var,Math
来源： https://www.cnblogs.com/luwei0915/p/15734747.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

canvas_07 炫彩小球