本教程详细介绍了如何使用javascript和html canvas api实现一个可等分并旋转的圆盘，以模拟频闪效应。文章将指导读者修改现有代码，实现将圆盘划分为三等份或更多份，并通过从圆心绘制线段而非直径的方式，确保各等分线正确显示。重点在于render函数的优化，使其能够灵活处理多等分情况。
1. 理解原始代码与需求分析
原始代码旨在通过HTML Canvas展示频闪效应，其中包含一个旋转的“基础”圆盘和一个“采样”圆盘。最初的绘制逻辑是将圆盘一分为二，通过从圆周上一点绘制一条线到其对面的点来形成一条直径。然而，实际需求是将圆盘划分为三等份或更多等份，并可能对其中部分分割线进行特殊着色。
核心挑战在于：
- 多等分绘制: 如何将一个圆盘均匀地分成N份。
- 绘制方式: 当等分数量大于2时，不能再简单地绘制直径，而需要从圆心向圆周绘制每条分割线。
- 颜色定制: 如何为特定的分割线应用不同的颜色（此部分将在进阶章节讨论）。
2. 实现圆盘多等分绘制的核心原理
要将一个圆盘均匀地分成N份，我们需要计算出每条分割线在圆周上的终点坐标。一个完整的圆是360度（或2π弧度）。因此，每份之间的角度间隔为 360 / N 度。
绘制每条分割线的步骤如下：
立即学习“Java免费学习笔记（深入）”；
- 确定圆心坐标 (cx, cy)。
- 确定圆的半径 r。
- 对于每一份，计算其在圆周上的终点角度 angle_i = current_rotation_angle + i * (360 / N)。这里的 current_rotation_angle 是圆盘当前的旋转角度，i 是当前分割线的索引（从0到N-1）。
- 使用三角函数计算该终点在Canvas上的坐标：
- x = cx + r * cos(angle_i_in_radians)
- y = cy - r * sin(angle_i_in_radians) （注意Canvas的Y轴方向向下为正，与数学坐标系相反，因此Y坐标需要用减法）
- 从圆心 (cx, cy) 绘制一条线到 (x, y)。
关键在于，每次绘制一条分割线时，都需要先将绘图笔移动回圆心 context.moveTo(cx, cy)，然后再绘制到新的圆周点。这样可以确保所有分割线都从圆心发出。
3. 修改render函数实现多等分
以下是针对原始JavaScript代码中render函数进行的修改，以实现将圆盘划分为三等份。此修改主要集中在绘制左侧和右侧圆盘分割线的部分。
function render() {
context.fillStyle = "#000000";
context.fillRect(0, 0, canvas_width, canvas_height);
context.strokeStyle = "#ffffff";
context.beginPath();
context.moveTo(canvas_width / 2, 0);
context.lineTo(canvas_width / 2, canvas_height);
context.stroke();
context.strokeStyle = "#ff51ff";
context.beginPath();
/* 左侧圆盘绘制修改开始 */
const x1 = canvas_width / 4, y1 = canvas_height / 2 + y_offset; // 左侧圆盘中心
const numberOfDivisions = 3; // 设置等分数，可根据需求调整为更多
const angleIncrement = 360 / numberOfDivisions; // 计算每份的角度增量
for (let i = 0; i < numberOfDivisions; i++) {
const currentSegmentAngle = wheel_angle + i * angleIncrement;
context.moveTo(x1, y1); // 移动到圆心
context.lineTo(x1 + wheel_radius * Math.cos(toRadian(currentSegmentAngle)),
y1 - wheel_radius * Math.sin(toRadian(currentSegmentAngle))); // 绘制从圆心到圆周的线
}
context.stroke(); // 统一绘制所有线段
context.beginPath();
context.arc(canvas_width / 4, canvas_height / 2 + y_offset, wheel_radius, 0, 2 * Math.PI);
context.stroke();
/* 左侧圆盘绘制修改结束 */
/* 右侧圆盘绘制修改开始 */
context.strokeStyle = "#00ff00";
context.beginPath();
const x2 = 3 * canvas_width / 4, y2 = y1; // 右侧圆盘中心
for (let i = 0; i < numberOfDivisions; i++) {
const currentSegmentAngle = camera_angle + i * angleIncrement;
context.moveTo(x2, y2); // 移动到圆心
context.lineTo(x2 + wheel_radius * Math.cos(toRadian(currentSegmentAngle)),
y2 - wheel_radius * Math.sin(toRadian(currentSegmentAngle))); // 绘制从圆心到圆周的线
}
context.stroke(); // 统一绘制所有线段
/* 右侧圆盘绘制修改结束 */
context.beginPath();
context.arc(3 * canvas_width / 4, canvas_height / 2 + y_offset, wheel_radius, 0, 2 * Math.PI);
context.stroke();
// ... (其余代码保持不变，例如文本绘制部分) ...
if (mobile) {
context.font = "15px Arial";
}
else {
context.font = "30px Arial";
}
context.textAlign = "center";
context.fillStyle = "#ffffff";
context.fillText("Base", canvas_width / 4, 30);
context.fillText("Teste Aliasing", 3 * canvas_width / 4, 30);
}
// 确保toRadian函数可用，它负责将度数转换为弧度
function toRadian(degree) {
return (Math.PI * degree / 180);
}代码解析：
- numberOfDivisions: 引入一个常量来定义圆盘的等分数。您可以根据需求将其更改为任何大于或等于3的整数。
- angleIncrement: 根据 numberOfDivisions 计算出每条分割线之间的角度增量。
- for 循环: 遍历 numberOfDivisions 次，每次循环绘制一条分割线。
- currentSegmentAngle: 计算当前分割线在圆周上的角度，它是当前圆盘旋转角度 wheel_angle（或 camera_angle）加上 i 倍的角度增量。
- context.moveTo(x, y): 在绘制每条线段之前，将绘图笔移动到圆心 (x1, y1) 或 (x2, y2)。这是实现从圆心向外辐射状绘制的关键。
- context.lineTo(...): 从圆心绘制一条线到计算出的圆周上的点。
- context.stroke(): 在循环结束后统一调用 context.stroke()，一次性描边所有路径。如果所有分割线颜色相同，这种方式效率更高。
4. 实现部分分割线不同颜色（进阶）
如果需要让某条或某几条分割线呈现不同的颜色，可以在绘制循环内部根据条件判断来改变 context.strokeStyle。
例如，让左侧圆盘的第一条分割线显示为蓝色，其余为默认颜色：
// ... 左侧圆盘绘制部分
// context.strokeStyle = "#ff51ff"; // 默认颜色可以放在循环外或每次重设
context.beginPath();
const x1 = canvas_width / 4, y1 = canvas_height / 2 + y_offset;
const numberOfDivisions = 3;
const angleIncrement = 360 / numberOfDivisions;
for (let i = 0; i < numberOfDivisions; i++) {
const currentSegmentAngle = wheel_angle + i * angleIncrement;
// 根据条件设置不同的颜色
if (i === 0) { // 如果是第一条分割线
context.strokeStyle = "#0000ff"; // 设置为蓝色
} else {
context.strokeStyle = "#ff51ff"; // 恢复为默认的粉色
}
context.moveTo(x1, y1);
context.lineTo(x1 + wheel_radius * Math.cos(toRadian(currentSegmentAngle)),
y1 - wheel_radius * Math.sin(toRadian(currentSegmentAngle)));
context.stroke(); // 每绘制一条线就调用一次stroke，因为颜色可能变化
}
// 注意：如果颜色在循环内变化，context.stroke() 必须在循环内调用
// 如果所有线段都使用相同的颜色，则可以在循环外部统一调用一次 stroke()
// ...重要提示： 当 strokeStyle 在循环内部变化时，为了使每条线段应用其对应的颜色，context.stroke() 必须移动到循环内部，每次绘制一条线就立即描边。如果将 context.stroke() 放在循环外部，所有 lineTo 操作将形成一个单一路径，并最终应用循环结束时 `
