在前端开发中，使用HTML的<canvas>元素可以很方便地实现同心圆环。以下是一个简单的示例代码，展示了如何使用Canvas API来绘制同心圆环：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>同心圆环示例</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="400" height="400"></canvas>
<script>
// 获取canvas元素和上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 设置圆环的中心点
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
// 设置圆环的半径和宽度
const outerRadius = 100;
const innerRadius = 80;
// 设置圆环的颜色和填充样式
ctx.strokeStyle = 'blue';
ctx.lineWidth = outerRadius - innerRadius;
ctx.lineCap = 'round'; // 设置线帽样式为圆角
// 开始绘制同心圆环
ctx.beginPath();
ctx.arc(centerX, centerY, outerRadius, 0, Math.PI * 2, false); // 外圆
ctx.stroke(); // 绘制外圆轮廓
// 如果需要绘制多个同心圆环，可以修改半径和颜色，然后重复上述步骤
// 例如，再绘制一个内圆环：
ctx.strokeStyle = 'red'; // 设置内圆环的颜色
ctx.lineWidth = innerRadius - 60; // 设置内圆环的宽度
ctx.beginPath();
ctx.arc(centerX, centerY, innerRadius - ctx.lineWidth / 2, 0, Math.PI * 2, false); // 内圆，注意调整半径以考虑线宽
ctx.stroke(); // 绘制内圆轮廓
</script>
</body>
</html>
在这个示例中，我们首先创建了一个<canvas>元素，并设置了其宽度和高度。然后，在JavaScript代码中，我们获取了canvas的上下文对象（ctx），用于绘制图形。
接下来，我们设置了圆环的中心点（centerX和centerY），以及外圆环的半径（outerRadius）和内圆环的半径（innerRadius）。我们还设置了圆环的颜色（strokeStyle）和线宽（lineWidth）。
最后，我们使用beginPath()方法开始绘制路径，然后使用arc()方法绘制圆环的外圆和内圆。arc()方法接受六个参数：圆心的x坐标、圆心的y坐标、半径、起始角度、结束角度和绘制方向（可选，默认为false表示顺时针方向）。在这个示例中，我们绘制了一个完整的圆环，所以起始角度为0，结束角度为Math.PI * 2（即360度）。最后，我们使用stroke()方法绘制圆环的轮廓。
注意：如果需要绘制多个同心圆环，可以修改半径和颜色等属性，然后重复上述绘制步骤。在示例代码中，我也展示了如何绘制一个内圆环。
标签：canvas,const,实现,ctx,同心圆,绘制,圆环 From： https://www.cnblogs.com/ai888/p/18638424