JavaScript 绘制正弦曲线完整实现与参数详解

正弦曲线数学原理与示例

正弦曲线的标准数学表达式为 y=Asin(ωx+φ)+k。

相关示例代码可访问：http://www.zhaojz.com.cn/demo/draw7.html。

JavaScript 函数定义与参数说明

以下是 JavaScript 中定义该绘图函数的具体方式。

// 绘制正弦曲线的主函数
// dot 参数表示坐标系原点坐标
// amplitude 参数代表振幅，对应公式中的 A
// initialPhase 参数代表初相，对应公式中的 φ
// setover 参数代表垂直偏距，对应公式中的 k
// palstance 参数代表角速度，对应公式中的 ω
// len 参数用于确定绘制的周期数量
function drawSinusoid(dot, amplitude, initialPhase, palstance, setover, len, opts) {
var color = opts && opts.color ? opts.color : "DarkRed"; // 设置曲线颜色，默认为深红色
var max = len * 2 * Math.PI / w; // 计算 x 轴的最大值
// var x = -2 * Math.PI / w / 3; // 注释掉的初始 x 值设定
var x = 0; // 初始化 x 的起始值为 0
var pre = [dot[0] + x, dot[1] + (amplitude * Math.sin(palstance * x + initialPhase) + setover)]; // 计算起始点的 y 坐标
for (; x < max; x += 5) { // 循环绘制，每 5 个单位绘制一段线段
var cur = [dot[0] + x, dot[1] + (amplitude * Math.sin(palstance * x + initialPhase) + setover)]; // 计算当前点的坐标
drawLine(pre, cur, {color: color}); // 连接前一点与当前点，绘制线段
pre = cur; // 更新前一点为当前点，准备下一次循环
    }
var d = Math.PI / (2 * w); // 计算描点时的步长
for (var x = 0; x < max; x += d) { // 循环进行描点操作
var cur = [dot[0] + x, dot[1] + (amplitude * Math.sin(palstance * x + initialPhase) + setover)]; // 计算当前描点坐标
drawPoint({
pw: 3, ph: 3, color: 'DarkRed', point: cur
        });
    }
    
var pend = [dot[0] + max, dot[1] + (amplitude * Math.sin(palstance * max + initialPhase) + setover)]; // 计算终点坐标
drawPoint({
pw: 3, ph: 3, color: 'DarkRed', point: pend
    });
drawLine(pre, pend); // 绘制最后一段线段至终点
}