当前位置：首页 > 前端开发 > 正文

html如何用js绘制等分圆

admin
前端开发
2025-09-08
2

HTML中用JS绘制等分圆，可借助Canvas API，先获取Canvas上下文，设置好圆心、半径，再按角度间隔计算各分点坐标并连线

是使用HTML结合JavaScript（JS）绘制等分圆的详细步骤及代码示例,涵盖从基础实现到优化交互的完整流程：

核心原理与数学准备

定义参数
- 等分数（num）：决定将圆形分割为多少个相等的部分，例如var num = 36;表示每份占10°（因一周360°）。
- 单份弧度计算：通过公式 angle = Math.PI 2 / num 得出每个扇形的角度增量，这里用弧度制而非角度制，因Canvas API默认使用弧度。
- 圆心坐标（x₀, y₀）：通常取画布中心点，即 w/2 和 h/2（其中w和h分别为画布宽高）。
关键函数解析
- ctx.beginPath()：初始化新路径，避免之前绘制的内容干扰当前操作。
- ctx.arc(x, y, radius, startAngle, endAngle)：核心绘图方法，参数依次为圆心横纵坐标、半径、起始角度、终止角度，注意角度以水平向右为基准轴，逆时针方向增加。
- ctx.stroke()或fill()：分别用于描边或填充闭合区域，若需区分不同分区的颜色,可在循环内动态修改样式属性。

完整实现步骤

HTML结构搭建

创建一个带有唯一ID标识的<canvas>元素作为绘图载体：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">JS绘制等分圆</title>
    <style>
        body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
        canvas { border: 1px solid #ccc; }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script src="script.js"></script>
</body>
</html>

说明：通过CSS使画布居中显示，并添加边框便于观察边界范围,外部引入JS文件保持代码分离。

JavaScript逻辑实现

在script.js中编写如下代码：

// 获取画布及其上下文对象
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 设置画布尺寸（可根据需求调整）
canvas.width = 400;
canvas.height = 400;
// 配置参数
const numSegments = 12;          // 等分数
const radius = Math.min(canvas.width, canvas.height)  0.4; // 自适应半径
const centerX = canvas.width / 2; // 圆心X坐标
const centerY = canvas.height / 2;// 圆心Y坐标
const segmentAngle = (Math.PI  2) / numSegments; // 每段对应的弧度
// 绘制所有等分扇形
for (let i = 0; i < numSegments; i++) {
    const startAngle = i  segmentAngle;          // 当前段的起始角度
    const endAngle = (i + 1)  segmentAngle;       // 当前段的结束角度
    ctx.beginPath();                             // 新建路径
    ctx.moveTo(centerX, centerY);                // 连接到圆心形成闭合区域
    ctx.arc(centerX, centerY, radius, startAngle, endAngle); // 画弧线段
    ctx.closePath();                             // 自动闭合路径至起点
    // 随机生成颜色增强视觉效果
    const hue = (i  360 / numSegments) % 360;     // HSL色彩模型中的色调值
    ctx.fillStyle = `hsl(${hue}, 70%, 60%)`;       // 设置填充色
    ctx.fill();                                   // 执行填充操作
    // 可选：添加白色描边突出轮廓
    ctx.strokeStyle = 'white';
    ctx.lineWidth = 2;
    ctx.stroke();
}

关键点注释：

moveTo(centerX, centerY)确保每个扇形都从圆心出发，形成三角形+弧线的结构。

closePath()会自动连接路径的最后一点与初始点，此处即回到圆心完成封闭图形。

HSL颜色模式通过循环变量i实现渐变色效果,使相邻分区的色彩过渡自然。

进阶优化技巧

响应式适配

监听窗口大小变化事件,动态更新画布尺寸并重绘内容：

html如何用js绘制等分圆第1张

function resizeCanvas() {
    const container = document.querySelector('body');
    canvas.width = container.clientWidth  0.8;
    canvas.height = container.clientHeight  0.8;
    drawCircle(); // 重新调用绘制函数
}
window.addEventListener('resize', resizeCanvas);

此方案保证页面缩放时图形始终居中且比例协调。

交互功能扩展

为每个扇形绑定点击事件,可通过以下方式实现：

// 存储所有扇形的数据结构
const segmentsData = Array.from({length: numSegments}, (_, index) => ({
    index,
    startAngle: index  segmentAngle,
    endAngle: (index + 1)  segmentAngle,
    color: `hsl(${index  360 / numSegments}, 70%, 60%)`
}));
// 检测鼠标落点所在的扇形索引
canvas.addEventListener('click', (event) => {
    const rect = canvas.getBoundingClientRect();
    const mouseX = event.clientX rect.left;
    const mouseY = event.clientY rect.top;
    // 转换为相对于圆心的极坐标系下的夹角θ
    const dx = mouseX centerX;
    const dy = mouseY centerY;
    let theta = Math.atan2(dy, dx); // 范围[-π, π] → 标准化到[0, 2π]区间
    if (theta < 0) theta += Math.PI  2;
    // 根据θ确定所属扇区编号
    const hitIndex = Math.floor(theta / segmentAngle);
    alert(`你点击了第 ${hitIndex + 1} 个扇形！`);
});