Canvas之进度条的制作（矩形，圆环）

Canvas之进度条的绘制

基本进度条的绘制

1.矩形进度条

关键语法

获取画笔

var ctx=document.getElementById(“id”).getContext(“2d”);
填充颜色

ctx.fillStytle=“color”;
setInternal()和clearInternal()的使用

代码(两种类型):

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>矩形进度条搭建</title><style>body{text-align: center;}
canvas{background-color: lightblue;}</style>
</head>
<body><h1>进度条的世界</h1><canvas id="c4" width="500" height="400"></canvas><script><!-- 矩形进度条 -->var ctx=document.getElementById("c4").getContext("2d");  //画笔var x=100;var y=180;var xMove=1;var process=setInterval(function(){ctx.clearRect(0,180,400,20);   //擦掉重新绘制ctx.fillStyle="darkgrey";      //填充颜色ctx.fillRect(100,180,300,20);  //填充矩形ctx.fillStyle="green";if(x<=400-30){ctx.fillRect(x,y,30,20);x+=xMove*30;}else   //两种其中加载完毕模式，我进行了注释,需要尝试的可自己引用{x=100;               //重新开始进度条// 加载完毕模式// clearInterval(process);// ctx.clearRect(0,180,400,20);// alert("加载完毕！");}},200)</script>
</body>
</html>`

运行结果:

给你看点好看的东西哈哈，一个视频来看结果:

https://www.bilibili.com/video/BV1AQ4y1o7TM

2.圆形进度条的绘制

关键语法

获取画笔

var ctx=document.getEelementById(“id”).getContext(“2d”);

设置画笔宽度(圆环形需要，扇形需要)

ctx.lineWidth=20(根据需要自己设置);

分别设置两个圆环,第一个颜色为转动的进度条的颜色，第二个颜色为总进度条的背景色，根据下面语法自己计算度数绘画。
```
context.arc(x,y,r,sAngle,eAngle,counterclockwise)
```

参数表

度数计算(注意开始角的位置):

度数计算

案例代码:

1.圆环形（两种）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>圆形进度条的绘制</title><style>body{text-align: center;}		canvas{background-color: lightblue;}</style>
</head>
<body><h1>圆形进度条</h1><canvas id="c5" width="500" height="400"></canvas><script>var  ctx=document.getElementById("c5").getContext("2d");   //获取画笔ctx.lineWidth="20";       //调节画笔宽度(即圆环粗细)var degree=360;var process=setInterval(function(){ctx.clearRect(0,0,500,400);    //擦掉，重新绘制//用设计的底色圆环ctx.strokeStyle="darkgreen";ctx.beginPath();ctx.arc(250,200,100,0,2*Math.PI);     //画圆ctx.stroke();                        //第二个圆环if(degree>=0){ctx.strokeStyle="darkgrey";      //描边底色ctx.beginPath();ctx.arc(250,200,100,3*Math.PI/2,degree/360*Math.PI*2-Math.PI/2);ctx.stroke();degree-=3;}else{//循环加载degree=360;//一次加载完毕clearInterval(process);     //结束循环alert("加载完毕!");ctx.clearRect(0,0,500,400);}},200)</script>
</body>
</html>`