版权声明：谁没个菜的时候！ https://blog.csdn.net/qq_32584661/article/details/82217610
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
canvas{
background:#9AA4FF;
}
</style>
</head>
<body>
<h3>canvas画布：绘制路径——圆拱</h3>
<canvas id="HuaBu">
您的浏览器不支持canvas画布
</canvas>
<script src="js/jquery-1.11.1.js"></script>
<script>
var w=600;
var h=600;
HuaBu.width=w; //画布的宽
HuaBu.height=h; //画布的宽
//创建画布
var ctx=HuaBu.getContext("2d");
//绘制灰色的圆环
ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI);
ctx.strokeStyle="#aaa";
ctx.lineWidth=15;
ctx.stroke();
//绘制彩色的进度环
var start=-Math.PI/2;
var deg=0; //进度环前进的角度
ctx.font="20px SimHei";
var timer=setInterval(function () {
ctx.beginPath();
deg+=5; //回次前进5度
ctx.arc(100,100,50,start,start+deg*Math.PI/180);
ctx.strokeStyle="#f00";
ctx.fillStyle="#f00";
if(deg>90){
ctx.strokeStyle="#0f0";
ctx.fillStyle="#0f0";
}
if(deg>180){
ctx.strokeStyle="#ff0";
ctx.fillStyle="#ff0";
}
if(deg>270){
ctx.strokeStyle="#f60f8d";
ctx.fillStyle="#f60f8d";
}
if(deg>359){
clearInterval(timer);
}
ctx.clearRect(70,70,60,60);
var txt=Math.floor(deg/360*100)+"%";
ctx.fillText(txt,80,110);
ctx.lineWidth=5;
ctx.stroke();
},100);效果图：
