canvas 鼠标滚动缩放和移动图片

好的，我可以为您提供一些实现鼠标滚动缩放和移动图片的代码。首先，您需要在 HTML 中创建一个 canvas 元素和一个图片元素，然后将图片绘制到 canvas 上。接下来，在 JavaScript 中添加以下代码：

// 获取 canvas 和图片元素
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = document.getElementById('img');

// 定义变量
var scale = 1; // 缩放比例
var translateX = 0; // 水平位移
var translateY = 0; // 垂直位移

// 绘制图片
ctx.drawImage(img, translateX, translateY, img.width * scale, img.height * scale);

// 监听鼠标滚轮事件
canvas.addEventListener('mousewheel', function(e) {
  e.preventDefault(); // 阻止默认事件
  var delta = e.wheelDelta / 1000; // 获取滚动值
  scale += delta; // 更新缩放比例
  if (scale < 0.1) scale = 0.1; // 最小缩放比例
  if (scale > 10) scale = 10; // 最大缩放比例
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
  ctx.drawImage(img, translateX, translateY, img.width * scale, img.height * scale); // 重新绘制图片
});

// 监听鼠标拖动事件
canvas.addEventListener('mousedown', function(e) {
  var startX = e.pageX - canvas.offsetLeft; // 获取起始坐标
  var startY = e.pageY - canvas.offsetTop;
  canvas.addEventListener('mousemove', move); // 监听鼠标移动事件
  function move(e) {
    translateX = e.pageX - startX; // 更新位移值
    translateY = e.pageY - startY;
    ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布
    ctx.drawImage(img, translateX, translateY, img.width * scale, img.height * scale); // 重新绘制图片
  }
  canvas.addEventListener('mouseup', function() {
    canvas.removeEventListener('mousemove', move); // 移除监听器
  });
});

上述代码实现了鼠标滚动缩放和鼠标拖动移动图片的功能。您可以根据需要进行调整和优化。