首页 > 代码库 > 等待条
等待条
代码：
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: 010 }11 12 canvas {13 background-color: #e5e5e514 }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()方法巧妙的实现了添加颜色。。
效果图：
等待条
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。