Canvas之画单一色圆环_带单色颜色的圆代码-CSDN博客

本文链接：https://blog.csdn.net/luochuanAD/article/details/73251792

本文介绍如何使用HTML5 Canvas绘制一个可动画的圆环，并附带完整代码示例。圆环由内外两层构成，外层颜色变化显示进度效果，内层为固定颜色。同时展示了文字绘制及动画循环的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一,说明

用HTML画出可动画的圆环.效果图如下:

二,代码片段(完整的代码demo在文章最后)

<canvas id="canvas" width="600" height="600" style="background: "#ffffff";" ></canvas>

<script>
			
			
        window.onload = function(){
            var canvas = document.getElementById('canvas'),  //获取canvas元素
                context = canvas.getContext('2d'),  //获取画图环境，指明为2d
                
                centerX = canvas.width/2,   //Canvas中心点x轴坐标
                centerY = canvas.height/2,  //Canvas中心点y轴坐标
                rad = Math.PI*2/100, //将360度分成100份，那么每一份就是rad度
                speed = 10; //加载的快慢就靠它了 
                
                canvas.onclick=function (){
                window.open('flightHour.html');
                }
                
                
            //绘制外圈
            function blueCircle(n){
                context.save();
                context.strokeStyle = "#A757A8"; //设置描边样式
                context.lineCap="round";
                context.radius=30;
                context.lineWidth = 30; //设置线宽
                context.beginPath(); //路径开始
                context.arc(centerX, centerY, 200 , -Math.PI/2, -Math.PI/2 +n*rad,false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
                context.stroke(); //绘制
                context.closePath(); //路径结束
                context.restore();
            }
            //绘制内圈
            function whiteCircle(){
                context.save();
                context.beginPath();
                context.radius=20;
                context.lineWidth = 20;
                context.strokeStyle = "gray";
                context.arc(centerX, centerY, 200 , 0, Math.PI*2, false);
                context.stroke();
                context.closePath();
                context.restore();
            }  
            //文字绘制
            function text(n){
                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
                context.strokeStyle = "#808080"; //设置描边样式
                context.fillStyle="#808080";
				
              context.font = "60px sans-serif"; //设置字体大小和字体
                
                //绘制字体，并且指定位置
                context.fillText("966", centerX-45, centerY-20);
                context.font = "40px sans-serif";
                context.fillText("总数", centerX-45, centerY+40);
                context.stroke(); //执行绘制
                context.restore();
            } 
            
            //动画循环
            (function drawFrame(){
                window.requestAnimationFrame(drawFrame, canvas);
                context.clearRect(0, 0, canvas.width, canvas.height);
                whiteCircle();
                text(speed);
                
                blueCircle(speed);
                if(speed>0&&speed<88) {
                	speed += 1;
                }else{
                	speed=88;
                }
                
            }());
        }
    </script>