当前位置：首页 > JavaScript

实现画布拖拽js

2026-04-04 19:03:05JavaScript

实现画布拖拽的基本思路

通过监听鼠标事件（mousedown、mousemove、mouseup）计算画布偏移量，结合 CSS 的 transform 或直接修改 left/top 实现拖拽效果。

核心代码实现

HTML 结构

实现画布拖拽js

<div id="canvas" style="width: 500px; height: 300px; background: #eee; position: relative;"></div>

JavaScript 逻辑

实现画布拖拽js

const canvas = document.getElementById('canvas');
let isDragging = false;
let startX, startY;
let offsetX = 0, offsetY = 0;

canvas.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX - offsetX;
  startY = e.clientY - offsetY;
});

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  offsetX = e.clientX - startX;
  offsetY = e.clientY - startY;
  canvas.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

优化方向

边界限制 防止画布拖出可视区域：

const maxX = window.innerWidth - canvas.offsetWidth;
const maxY = window.innerHeight - canvas.offsetHeight;

offsetX = Math.max(0, Math.min(offsetX, maxX));
offsetY = Math.max(0, Math.min(offsetY, maxY));

惯性滑动 通过记录移动速度实现惯性效果：

let lastX = 0, lastY = 0;
let speedX = 0, speedY = 0;
let lastTime = 0;

// 在 mousemove 中记录速度
const now = Date.now();
if (lastTime) {
  const deltaTime = now - lastTime;
  speedX = (offsetX - lastX) / deltaTime;
  speedY = (offsetY - lastY) / deltaTime;
}
lastX = offsetX;
lastY = offsetY;
lastTime = now;

// mouseup 后继续滑动
function animate() {
  if (!isDragging && (Math.abs(speedX) > 0.1 || Math.abs(speedY) > 0.1)) {
    offsetX += speedX * 16;
    offsetY += speedY * 16;
    speedX *= 0.95;
    speedY *= 0.95;
    canvas.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
    requestAnimationFrame(animate);
  }
}

完整示例代码

<!DOCTYPE html>
<div id="canvas" style="width: 500px; height: 300px; background: #eee;"></div>
<script>
  const canvas = document.getElementById('canvas');
  let isDragging = false;
  let startX, startY;
  let offsetX = 0, offsetY = 0;

  canvas.style.transform = 'translate(0, 0)';
  canvas.style.cursor = 'grab';

  canvas.addEventListener('mousedown', (e) => {
    isDragging = true;
    startX = e.clientX - offsetX;
    startY = e.clientY - offsetY;
    canvas.style.cursor = 'grabbing';
  });

  document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    offsetX = e.clientX - startX;
    offsetY = e.clientY - startY;
    canvas.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
  });

  document.addEventListener('mouseup', () => {
    isDragging = false;
    canvas.style.cursor = 'grab';
  });
</script>