Canvas 实现图片缩放、拖拽

Canvas 是 HTML5 中的元素，用于在网页中创建图形。Canvas 使用 JavaScript 来绘制图形，因此可以创建各种各样的动态和交互式图形。

Canvas 的基本概念如下：

• 画布 (Canvas) ：Canvas 是一个矩形区域，用于绘制图形。
• 上下文 (Context) ：上下文是 Canvas 的绘图环境，它提供了各种方法来绘制图形。
• 路径 (Path) ：路径是 Canvas 中的一系列点，这些点可以用来绘制线段、矩形、圆形等图形。
• 填充 (Fill) ：填充是指在路径内部填充颜色或图案。
• 描边 (Stroke) ：描边是指在路径的边缘绘制线条。
• 变换 (Transform) ：变换可以用来平移、旋转、缩放和倾斜 Canvas 中的图形。

Canvas 可以兼容 PC 端和移动端。在 PC 端，可以使用鼠标来操作 Canvas。在移动端，可以使用手指来操作 Canvas。

要监听滚动事件，可以使用 addEventListener() 方法。addEventListener() 方法的第一个参数是事件类型，第二个参数是事件处理函数。当滚动事件发生时，事件处理函数将被调用。

下面是一个示例，演示如何使用 Canvas 实现图片缩放和拖拽效果：

<canvas id="canvas" width="500" height="500"></canvas>

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

// 加载图片
var image = new Image();
image.onload = function() {
  // 绘制图片
  context.drawImage(image, 0, 0);
};
image.src = "image.jpg";

// 缩放图片
var scaleFactor = 1;
function zoom(e) {
  e.preventDefault();
  scaleFactor += e.deltaY * 0.01;
  context.setTransform(scaleFactor, 0, 0, scaleFactor, 0, 0);
  context.drawImage(image, 0, 0);
}

// 拖拽图片
var startX;
var startY;
var isDragging = false;
function mousedown(e) {
  startX = e.clientX;
  startY = e.clientY;
  isDragging = true;
}

function mousemove(e) {
  if (isDragging) {
    var dx = e.clientX - startX;
    var dy = e.clientY - startY;
    context.translate(dx, dy);
    context.drawImage(image, 0, 0);
  }
}

function mouseup(e) {
  isDragging = false;
}

// 添加事件监听器
canvas.addEventListener("wheel", zoom);
canvas.addEventListener("mousedown", mousedown);
canvas.addEventListener("mousemove", mousemove);
canvas.addEventListener("mouseup", mouseup);

这个示例中，我们首先创建了一个 Canvas 元素，并获取了它的上下文。然后，我们加载了一张图片，并在 Canvas 中绘制了这张图片。接着，我们添加了两个事件监听器，分别监听鼠标滚轮事件和鼠标移动事件。在鼠标滚轮事件处理函数中，我们缩放图片。在鼠标移动事件处理函数中，我们拖拽图片。