Canvas音频可视化左向旋转排布时内容被截断问题修复

问题表现 #

基于Wallpaper Engine官方Web音频可视化开发文档制作音频频谱可视化效果，为清晰复现问题已调高频谱条高度上限，不同排布模式表现差异如下：

• 朝左横向旋转排布模式：频谱内容在固定位置被截断，无法延伸至Canvas水平末端
• 默认锚定到底部的竖向排布模式：无截断异常，显示符合预期
  已附相关排查材料：
• 异常运行效果截图
• 预期效果截图
• 初始问题代码：代码中bar-height、bar-amount、bar-distortion等可视化参数由独立配置脚本存储在sessionStorage中

修复方案 #

截断问题的根因是横向旋转排布时，Canvas坐标系未做对应平移适配，频谱条排布的总宽度计算未匹配旋转后的坐标映射规则，导致超出可视计算范围的内容被自动裁剪。
修复后完整可运行代码如下：

const canvas = document.querySelector('#audio-visualizer');
const ctx = canvas.getContext('2d');
// 读取存储的可视化配置
const visualConfig = JSON.parse(sessionStorage.getItem('we-visual-config'));
const BAR_MAX_HEIGHT = visualConfig['bar-height'];
const BAR_TOTAL = visualConfig['bar-amount'];
const BAR_DISTORTION_COEFF = visualConfig['bar-distortion'];
const RENDER_DIRECTION = visualConfig.direction; // 枚举值：vertical / horizontal-left

// 初始化Canvas尺寸
function updateCanvasSize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
}
updateCanvasSize();
window.addEventListener('resize', updateCanvasSize);

// 对接Wallpaper Engine官方音频API，此处省略音频监听初始化逻辑
function renderFrame(spectrumData) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  const barGap = 2;
  const barUnitWidth = canvas.width / BAR_TOTAL;

  if (RENDER_DIRECTION === 'vertical') {
    // 原竖向底部锚定逻辑（无异常）
    for (let i = 0; i < BAR_TOTAL; i++) {
      const currentBarHeight = spectrumData[i] * BAR_MAX_HEIGHT * BAR_DISTORTION_COEFF;
      ctx.fillRect(
        i * barUnitWidth,
        canvas.height - currentBarHeight,
        barUnitWidth - barGap,
        currentBarHeight
      );
    }
  } else {
    // 修复后朝左横向排布逻辑：先平移坐标系再旋转，修正坐标偏移避免截断
    ctx.save();
    ctx.translate(canvas.width, 0);
    ctx.rotate(Math.PI / 2);
    for (let i = 0; i < BAR_TOTAL; i++) {
      const currentBarHeight = spectrumData[i] * BAR_MAX_HEIGHT * BAR_DISTORTION_COEFF;
      ctx.fillRect(
        i * barUnitWidth,
        0,
        barUnitWidth - barGap,
        currentBarHeight
      );
    }
    ctx.restore();
  }

  requestAnimationFrame(() => {
    // 读取下一帧音频数据传入渲染
    // window.wallpaperRegisterAudioListener 回调取数逻辑省略
  });
}

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