如何在HTML Canvas中使用bezierCurveTo绘制螺旋线？

我需要绘制一条半径随角度稳定递增的螺旋线。查找相关实现时发现：

• 使用lineTo方法时，需通过绘制大量线段来近似圆或螺旋线，线段数量越多，外观越平滑，但会带来明显性能损耗，开发者必须在性能与外观之间权衡。
• 使用bezierCurveTo方法可以绘制出效果更优的螺旋线，且性能损耗更低，但我不清楚该如何计算该方法所需的控制点。

用lineTo实现螺旋线的代码示例 #

context.save();
context.beginPath();
let offset = initialRadius;
for (let turn = 0; turn < turnCount; turn++) {
    for (let step = 0; step < stepCount; step++) {
        context.lineTo(offset, 0);
        offset += growthPerTurn / stepCount;
        context.rotate(360 / stepCount * Math.PI / 180);
    }
}
context.lineWidth = 3;
context.strokeStyle = "yellow";
context.stroke();
context.restore();

贝塞尔曲线绘制螺旋线的首次尝试 #

我尝试用bezierCurveTo近似绘制螺旋线，但代码中的temp值是通过反复试验确定的，缺乏理论依据：

context.moveTo(initialRadius, 0);
const temp = 1.25;
for (let turn = 0; turn < turnCount; turn++) {
    for (let step = 1; step <= stepsPerTurn; step++) {
        const points = [
            [temp * calculateOffset(turn, step -0.66) * Math.cos(calculateAngle(step - 0.66)), temp * calculateOffset(turn, step -0.66) * Math.sin(calculateAngle(step - 0.66))],
            [temp * calculateOffset(turn, step -0.33) * Math.cos(calculateAngle(step - 0.33)), temp * calculateOffset(turn, step -0.33) * Math.sin(calculateAngle(step - 0.33))],
            [calculateOffset(turn, step) * Math.cos(calculateAngle(step)),calculateOffset(turn, step) * Math.sin(calculateAngle(step))],
        ];
        context.bezierCurveTo(points[0][0], points[0][1], points[1][0], points[1][1], points[2][0], points[2][1]);
    }
}

内容的提问来源于Stack Exchange，提问作者GniLudio