等待条

代码：

 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()方法巧妙的实现了添加颜色。。

效果图：