JavaScript Canvas2D 右侧波形镜像到左侧的实现方案咨询

方案优劣对比 #

两种实现方案各有适用场景，可根据项目需求选择：

• 镜像映射方案：性能开销更低，不需要额外计算左侧波形的顶点/高度数据，仅复用右侧已渲染完成的像素内容，适合波形左右完全对称的需求场景，不会额外增加CPU计算压力，完全匹配使用Canvas降低处理器负载的预期。
• 单独绘制左侧波形方案：灵活度更高，支持左右波形做差异化处理（比如左侧波形振幅、密度、颜色和右侧不同），但需要额外执行一次波形的高度计算、路径生成逻辑，会增加少量计算开销，适合需要左右波形不对称的场景。

镜像映射方案实现步骤 #

该方案只需要在现有右侧波形绘制完成后，追加少量代码即可实现，核心是利用画布变换实现像素复用：

// 原有右侧波形绘制逻辑执行完成后，追加以下代码
ctx.save();
// 水平翻转画布，同步平移坐标原点避免镜像内容落到可视区域外
ctx.scale(-1, 1);
ctx.translate(-canvas.width, 0);
// 将画布右侧半幅内容拷贝绘制到左侧
ctx.drawImage(canvas, 
  canvas.width / 2, 0, canvas.width / 2, canvas.height,
  0, 0, canvas.width / 2, canvas.height
);
ctx.restore();

该方案不会重复执行波形计算逻辑，仅做一次像素级拷贝，GPU处理该操作的开销几乎可以忽略。

单独绘制左侧波形方案实现步骤 #

如果需要左右波形可独立调整，可修改原有波形计算逻辑，生成双份波形数据分别绘制在两侧即可：

// 原有生成右侧波形高度数组的逻辑
const rightBars = getWaveHeights(); 
// 需要对称波形直接反转数组即可，不需要对称则重新调用getWaveHeights生成独立数组
const leftBars = [...rightBars].reverse(); 

// 原有右侧波形绘制逻辑不变
rightBars.forEach((height, index) => {
  const x = canvas.width / 2 + index * barWidth;
  ctx.fillRect(x, canvas.height / 2 - height / 2, barWidth - gap, height);
})

// 新增左侧波形绘制逻辑
leftBars.forEach((height, index) => {
  const x = canvas.width / 2 - (index + 1) * barWidth;
  ctx.fillRect(x, canvas.height / 2 - height / 2, barWidth - gap, height);
})

若需要左右波形完全一致，优先选择镜像方案性能更优；如果需要左右有差异化效果再选择该方案。

内容的提问来源于stack exchange，提问作者JamesB