代码：
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>
注意这行代码：
otex.strokeStyle = "rgba(" + [red, green, blue, alpha].join(",") + ")";
通过join()方法巧妙的实现了添加颜色。。
效果图：
时间： 2024-08-10 19:02:32