如何在Canvas中实现正弦曲线运动效果？

算力阿峰

2026-7-7

实现正弦曲线式的往复运动（边缘减速、中间加速）

原代码存在的问题

位置计算逻辑错误：x * Math.sin(q)将线性变化的x与正弦值相乘，无法实现预期的变速往复效果
角度变量未正确更新：q=+1.0是赋值操作而非累加，导致正弦值固定，运动失去周期性
方向切换逻辑为线性变速，无法实现边缘减速、中间加速的平滑过渡

修正思路

利用正弦函数的天然特性：

正弦函数在0和π处导数为0（对应运动到边缘时速度为0）
在π/2处导数最大（对应运动到中间位置时速度最快）
定义运动区间范围，将正弦函数的输出值映射到该区间，通过持续累加角度变量实现平滑往复

修正后的代码

let angle = 0; // 随时间递增的角度变量
const minX = 50; // 运动左边界
const maxX = 200; // 运动右边界
const radius = 20; // 圆点半径
const centerX = (minX + maxX) / 2; // 运动区间中点
const range = (maxX - minX) / 2; // 运动半程距离

function motion() {
  requestAnimationFrame(motion);
  
  // 清空画布
  ctx3.fillStyle = "white";
  ctx3.fillRect(0, 0, canvas3.width, canvas3.height);
  
  // 计算当前x坐标：将正弦值映射到目标运动区间
  // Math.sin(angle)范围[-1,1]，乘以range后映射为[-range, range]，加上centerX得到[minX, maxX]
  const x = centerX + range * Math.sin(angle);
  
  // 绘制圆点
  ctx3.beginPath();
  ctx3.fillStyle = "blue";
  ctx3.arc(x, 100, radius, 0, 2 * Math.PI);
  ctx3.fill();
  ctx3.closePath();
  
  // 累加角度控制运动速度，数值越小运动越慢
  angle += 0.05;
}