等待条

最新推荐文章于 2021-09-27 15:30:18 发布

weixin_30568715

最新推荐文章于 2021-09-27 15:30:18 发布

阅读量79

点赞数

原文链接：http://www.cnblogs.com/chenluomenggongzi/p/5903432.html

版权

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>等待条</title>
 6     <style>
 7         * {
 8             margin: 0;
 9             padding: 0
10         }
11 
12         canvas {
13             background-color: #e5e5e5
14         }
15     </style>
16 </head>
17 <body>
18 <canvas id="mycanvas" width="500" height="500"></canvas>
19 <script>
20     var mycanvas = document.getElementById("mycanvas");
21     var otex = mycanvas.getContext("2d");
22     var draw = function (deg) {
23         otex.lineWidth = 20;
24         for (var i = 1; i < 361; i++) {
25             var red = 200;
26             var green = 150;
27             var blue = 170;
28             var alpha = i / 360;
29             otex.beginPath();
30             otex.strokeStyle = "rgba(" + [red, green, blue, alpha].join(",") + ")";
31             otex.arc(250, 250, 200, (i - 1 + deg) * 2 * Math.PI / 360, (i + deg) * 2 * Math.PI / 360);
32             otex.stroke();
33         }
34     };
35     var deg = 0;
36     setInterval(function () {
37         otex.clearRect(0, 0, 500, 500);
38         deg += 1;
39         draw(deg);
40         otex.font = "60px 黑体";
41         otex.fillText("Waitting", 140, 290);
42     }, 10)
43 
44 
45 </script>
46 </body>
47 </html>

View Code

注意这行代码：

　　otex.strokeStyle = "rgba(" + [red, green, blue, alpha].join(",") + ")";

通过join()方法巧妙的实现了添加颜色。。

效果图：

转载于:https://www.cnblogs.com/chenluomenggongzi/p/5903432.html

weixin_30568715

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
等待条

代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>等待条</title> 6 <style> 7 * { 8 ...
复制链接

扫一扫