代码：
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()方法巧妙的实现了添加颜色。。
效果图：
