Canvas 实现手指滑动超出屏幕内容显示 - 移动端网页设计技巧

1. 创建一个 canvas 元素，并设置宽高为屏幕宽高。

2. 在 canvas 中绘制需要显示的内容。

3. 监听 touchmove 事件，获取手指在屏幕上的坐标，计算手指的垂直移动距离。

4. 根据手指的垂直移动距离，移动 canvas 元素的位置。

5. 如果手指移动的距离超过了 canvas 元素的高度，就将 canvas 元素的位置还原到原始位置，同时将手指的垂直移动距离重置为 0。

6. 在 canvas 元素的上方添加一个遮罩层，用于遮盖 canvas 元素上方的内容，使得 canvas 元素的内容能够超出屏幕显示。

7. 在遮罩层上添加一个 touchmove 事件监听器，防止用户在手指移动时意外触发其他操作。

以下是示例代码：

HTML部分：

<div id='canvas-container'>
  <canvas id='canvas'></canvas>
  <div id='mask'></div>
</div>

CSS部分：

#canvas-container {
  position: relative;
  width: 100%;
  height: 100%;
}

#canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JavaScript部分：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

// 在canvas中绘制需要显示的内容
// ...

var startY = 0; // 手指开始触摸时的纵坐标
var offsetY = 0; // 手指移动的纵向距离

canvas.addEventListener('touchstart', function(e) {
  startY = e.touches[0].clientY;
});

canvas.addEventListener('touchmove', function(e) {
  offsetY = e.touches[0].clientY - startY;

  // 如果手指移动的距离超过了canvas的高度，则将canvas的位置还原到原始位置
  if (offsetY > canvas.height) {
    offsetY = 0;
    canvas.style.transform = 'translateY(0)';
  } else {
    canvas.style.transform = 'translateY(' + offsetY + 'px)';
  }
});

canvas.addEventListener('touchend', function() {
  startY = 0;
  offsetY = 0;
  canvas.style.transform = 'translateY(0)';
});

var mask = document.getElementById('mask');

mask.addEventListener('touchmove', function(e) {
  e.preventDefault(); // 防止用户在手指移动时意外触发其他操作
});