嘿，你的思路完全没问题！用两个Canvas分别承载竖屏和横屏的UI是一种很直接的实现方式，同时还有更灵活的方案可以选择，我给你详细拆解一下：

一、双Canvas方案的具体实现（你的初始思路） #

这种方案适合横竖屏UI逻辑差异极大、需要各自保留绘制状态的场景，步骤如下：

• 在布局中定义两个Canvas元素，给它们分配明确的标识，比如：

  <canvas id="portrait-canvas" width="375" height="812"></canvas>
  <canvas id="landscape-canvas" width="812" height="375" style="display:none;"></canvas>
  

• 监听屏幕方向变化事件，推荐同时监听orientationchange和resize（后者兼容桌面端），在事件回调中判断当前屏幕方向：

  function handleOrientationChange() {
    const isLandscape = window.innerWidth > window.innerHeight;
    const portraitCanvas = document.getElementById('portrait-canvas');
    const landscapeCanvas = document.getElementById('landscape-canvas');
    
    if (isLandscape) {
      portraitCanvas.style.display = 'none';
      landscapeCanvas.style.display = 'block';
      // 这里调用横屏UI的绘制逻辑
      renderLandscapeUI(landscapeCanvas.getContext('2d'));
    } else {
      landscapeCanvas.style.display = 'none';
      portraitCanvas.style.display = 'block';
      // 这里调用竖屏UI的绘制逻辑
      renderPortraitUI(portraitCanvas.getContext('2d'));
    }
  }
  
  window.addEventListener('orientationchange', handleOrientationChange);
  window.addEventListener('resize', handleOrientationChange);
  

• 注意要点：初始化时要根据当前屏幕方向显示对应的Canvas；两个Canvas的宽高要提前适配目标设备的分辨率，或者在事件中动态调整。

二、单Canvas动态适配方案（更轻量） #

如果横竖屏UI只是布局结构调整，不需要保留各自的绘制状态，单Canvas方案更节省资源：

• 只保留一个Canvas，在方向切换时动态修改其宽高，并重新绘制UI：

  const canvas = document.getElementById('main-canvas');
  const ctx = canvas.getContext('2d');
  
  function adjustCanvas() {
    const isLandscape = window.innerWidth > window.innerHeight;
    // 动态设置Canvas尺寸
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    // 清空画布后调用对应方向的绘制函数
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if (isLandscape) {
      renderLandscapeUI(ctx);
    } else {
      renderPortraitUI(ctx);
    }
  }
  
  window.addEventListener('orientationchange', adjustCanvas);
  window.addEventListener('resize', adjustCanvas);
  // 初始化时执行一次
  adjustCanvas();
  

• 优势：减少DOM元素数量，避免双Canvas的内存占用，适合大多数普通场景。

三、通用注意事项 #

• 先配置好视口（viewport），确保屏幕尺寸检测准确：

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  

• 避免依赖window.orientation判断方向（部分设备或浏览器不支持），用window.innerWidth > window.innerHeight的方式更可靠。
• 如果有交互逻辑（比如点击、拖拽），切换方向后要重新计算交互区域的坐标，避免点击错位。
• 预加载横竖屏所需的资源（图片、字体等），切换时直接使用，提升切换流畅度。

总的来说，双Canvas方案适合UI差异极大的场景，单Canvas方案更轻量高效，你可以根据自己的需求来选择~

内容的提问来源于stack exchange，提问作者alexavier.ywa