uni-app 当滚动区域的高度大于等于视口高度（100%或100vh）时 弹出层中的canvas绘制错位

在使用 uni-app 开发时，如果在滚动区域的高度大于或等于视口高度（即 100% 或 100vh）的情况下，弹出层中的 canvas 绘制出现错位问题，通常是由于 canvas 的绘制位置或尺寸计算不准确导致的。以下是一些可能的解决方案：

1. 检查 canvas 的尺寸和位置

确保 canvas 的尺寸和位置是相对于弹出层的视口计算的，而不是相对于页面的滚动区域。可以使用 uni-app 提供的 getSystemInfoSync 获取视口高度，并根据需要动态设置 canvas 的尺寸。

const systemInfo = uni.getSystemInfoSync();
const canvasHeight = systemInfo.windowHeight; // 视口高度
const canvasWidth = systemInfo.windowWidth; // 视口宽度

在 canvas 的 style 中动态设置高度和宽度：

<canvas canvas-id="myCanvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>

2. 使用 fixed 定位弹出层

如果弹出层是浮动的，确保其使用 fixed 定位，而不是 absolute 定位。这样可以避免滚动区域的影响。

.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

3. 监听滚动事件并重新绘制

如果滚动区域的高度大于视口高度，可能会导致 canvas 的绘制位置错位。可以通过监听滚动事件，在滚动时重新计算 canvas 的绘制位置。

onPageScroll(e) {
  this.scrollTop = e.scrollTop; // 获取滚动距离
  this.redrawCanvas(); // 重新绘制 canvas
},
methods: {
  redrawCanvas() {
    const ctx = uni.createCanvasContext('myCanvas', this);
    // 根据 scrollTop 重新计算绘制位置
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    ctx.draw();
  }
}

4. 使用 uni.createSelectorQuery 获取元素位置

通过 uni.createSelectorQuery 获取 canvas 或相关元素的位置信息，确保绘制时使用正确的坐标。

uni.createSelectorQuery()
  .select('#myCanvas')
  .boundingClientRect((rect) => {
    const canvasTop = rect.top; // canvas 距离视口顶部的距离
    const canvasLeft = rect.left; // canvas 距离视口左边的距离
    // 根据 canvasTop 和 canvasLeft 进行绘制
  })
  .exec();

5. 避免在滚动区域中使用 canvas

如果可能，尽量避免在滚动区域中使用 canvas，尤其是在弹出层中。可以将 canvas 放置在固定位置，或者使用其他方式（如图片）替代 canvas 的绘制。

6. 调试和排查

• 使用 console.log 输出 canvas 的尺寸、位置以及绘制时的坐标，检查是否存在偏差。
• 使用 uni-app 的调试工具检查 canvas 的实际渲染情况。

示例代码

以下是一个完整的示例，结合了上述解决方案：

<template>
  <view>
    <!-- 滚动区域 -->
    <scroll-view scroll-y style="height: 100vh;">
      <view style="height: 150vh; background: #f0f0f0;">
        <!-- 内容 -->
      </view>
    </scroll-view>

    <!-- 弹出层 -->
    <view class="popup" v-if="showPopup">
      <canvas canvas-id="myCanvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showPopup: true,
      canvasWidth: 0,
      canvasHeight: 0,
    };
  },
  mounted() {
    const systemInfo = uni.getSystemInfoSync();
    this.canvasWidth = systemInfo.windowWidth;
    this.canvasHeight = systemInfo.windowHeight;
    this.drawCanvas();
  },
  methods: {
    drawCanvas() {
      const ctx = uni.createCanvasContext('myCanvas', this);
      ctx.fillStyle = 'red';
      ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
      ctx.draw();
    },
  },
};
</script>

<style>
.popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
</style>