JavaScript Canvas实现等分旋转圆盘及频闪效应可视化教程

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);
}

    // ... 左侧圆盘绘制部分
    // 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()
    // ...