由于小程序用到的环形进度条，用canvas画的话有很多问题，如： 1、不能同层渲染 2、绘制画面不能随着滚动条而改变位置 所以最后还是得采取css+js方式写改效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆环运动</title> <style> .cirqueBox{ position: relative; width: 140px; height: 140px; border-radius: 50%; -webkit-mask: radial-gradient(transparent, transparent 60px, #000 0); mask: radial-gradient(transparent 60px, #000 0); } .cirqueRed{ position: absolute; width:100%; height: 100%; left:0; top:0; background-color:#e31514; z-index: 1; } .cirqueGrey{ position: absolute; width:100%; height: 100%; left:0; top:0; background-color:#aaa; z-index: 2; } @keyframes mymove { 0% { clip-path: polygon(70px 70px, 70px -300px, -300px 70px, 70px 440px, 440px 70px, 70px -300px); } 25% { clip-path: polygon(70px 70px, 70px -300px, -300px 70px, 70px 440px, 440px 70px, 440px 70px); } 50% { clip-path: polygon(70px 70px, 70px -300px, -300px 70px, 70px 440px, 70px 440px, 70px 440px); } 75% { clip-path: polygon(70px 70px, 70px -300px, -300px 70px, -300px 70px, -300px 70px, -300px 70px); } 100% { clip-path: polygon(70px 70px, 70px -300px, 70px -300px, 70px -300px, 70px -300px, 70px -300px); } } </style> </head> <body> <div class="cirqueBox"> <div class="cirqueRed"></div> <div class="cirqueGrey" id="circleAnimate"></div> </div> <script> document.getElementById('circleAnimate').style.animation="mymove 4.5s linear 1" document.getElementById('circleAnimate').style.animationFillMode="forwards" //以上两个顺序不能变，否则结束时动画状态不能为预期效果 </script> </body> </html>