Javascript如何实现Canvas随鼠标滚轴放大缩小

要实现Canvas随鼠标滚轴放大缩小，需要使用JavaScript监听鼠标滚轴事件并调用Canvas的缩放方法。

首先，使用JavaScript监听鼠标滚轴事件，通常使用addEventListener方法来实现：

canvas.addEventListener('wheel', handleMouseWheel);

其中，canvas是Canvas元素的引用，handleMouseWheel是处理鼠标滚轴事件的回调函数。

在处理鼠标滚轴事件的回调函数中，需要判断鼠标滚轴的滚动方向，然后调用Canvas的缩放方法来实现放大缩小：

function handleMouseWheel(event) {
  // 判断鼠标滚轴的滚动方向
  if (event.deltaY > 0) {
    // 向下滚动，表示缩小
    scaleCanvas(0.9);
  } else {
    // 向上滚动，表示放大
    scaleCanvas(1.1);
  }
}

其中，scaleCanvas是一个自定义的函数，用来缩放Canvas。它的实现可以使用Canvas的缩放方法scale来实现：

function scaleCanvas(scaleFactor) {
  // 获取Canvas的上下文
  var ctx = canvas.getContext('2d');
  // 计算缩放后的画布大小
  var width = canvas.width * scaleFactor;
  var height = canvas.height * scaleFactor;
  // 设置画布的宽高
  canvas.width = width;
  canvas.height = height;
  // 缩放画布
  ctx.scale(scaleFactor, scaleFactor);
  // 绘制图形
  // ...
}

AlexZ33 / canvas_demo

Javascript如何实现Canvas随鼠标滚轴放大缩小 #8