最后实际效果图
1、界定自变量
界定半径，界定圆环厚度，界定圆心部位、界定默认设置填充色调
let radius = 75
let thickness= 10
let innerRadius = radius - thickness
let x = 75
let y = 75
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#f2d7d7";
2、画第1个圆弧
ctx.beginPath(); ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI)
留意 beginPath() 这个方式，转化成相对路径的第1步。实质上，相对路径是由许多子相对路径组成，这些子相对路径全是在1个目录中，全部的子相对路径（线、弧形、这些）组成图型。而每次这个方式启用以后，目录清空重设，随后大家便可以再次绘图新的图型。
也便是说，这个方式能够用来给 Canvas图象 排序，绘图新的图型假如不启用此方式，那末新的图型会和前面的图型联接在1起
3、画第1个联接处
ctx.quadraticCurveTo((x - innerRadius) - thickness / 2, y - thickness, x - innerRadius, y)
联接外是用2次贝塞尔曲线图来画的，Canvas的 quadraticCurveTo(cp1x, cp1y, x, y) 方式接纳4个主要参数，第1、2个主要参数为操纵点，第3、4个主要参数为完毕点官方文本文档
只需算出操纵点和完毕点，便可以画出1个圆弧
4、画第2个圆弧
ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true)
留意方式后边最终1个主要参数，设定为true，意味着逆时针绘图（默认设置是顺时针）
5、画第2个联接处
ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)
这1步实际上和第3步相差不大，简易的替换了下主要参数部位
6、填充
ctx.fill();
至此，1个简易的未闭合的圆环就进行了
画第2个进度条圆环
7、原始化
ctx.beginPath(); ctx.fillStyle = "#e87c7c";
beginPath 表明绘图新的图型，假如不启用此方式，那后边画的图型会和前面画的图型连在1起
8、绘图第2个进度条圆环
ctx.beginPath(); ctx.fillStyle = "#e87c7c"; ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2) ctx.quadraticCurveTo((x + innerRadius) + thickness / 2, y + thickness, x + innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true) ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness) ctx.fill();
因为和第1个圆环绘图方法1模1样，就不在反复了，差别仅仅是圆的弧度
9、转动 Canvas
transform: rotate(⑴35deg);
因为css的转动较为便捷，也省去了角度的测算，因此自己应用的是css的transform来转动的。自然 Canvas 也出示了转动的方式
详细编码
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF⑻">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>canvas</title>
<style>
.ring {
width: 150px;
height: 150px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
}
#tutorial {
transform: rotate(⑴35deg);
width: 150px;
height: 150px;
}
.fraction {
position: absolute;
font-size: 30px;
font-weight: bold;
color: red;
}
.small {
font-size: 12px;
font-weight: lighter;
}
.title {
color: red;
bottom: 0;
position: absolute;
}
</style>
</head>
<body>
<div class="ring">
<canvas id="tutorial" width="150" height="150"></canvas>
<span class="fraction">100 <span class="small">分</span> </span>
<span class="title">服务分</span>
</div>
<script>
let radius = 75
let thickness = 10
let innerRadius = radius - thickness
let x = 75
let y = 75
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "#f2d7d7";
ctx.beginPath();
ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI)
ctx.quadraticCurveTo((x - innerRadius) - thickness/2 , y - thickness, x - innerRadius, y)
ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true)
ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#e87c7c";
ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2)
ctx.quadraticCurveTo((x + innerRadius) + thickness / 2, y + thickness, x + innerRadius, y)
ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true)
ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)
ctx.fill();
</script>
</body>
</html>
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。