canvas拖拽 放大缩小

Canvas拖拽和放大缩小是HTML5 Canvas API中常用的功能，它们可以帮助用户更好地交互和控制绘制的内容。

**拖拽功能：**
在Canvas上实现拖拽通常涉及两个主要步骤：
1. **监听事件**: 使用`mousedown`、`mousemove`和`mouseup`等事件，当鼠标按下并移动时记录开始位置（mousedown），然后在移动过程中计算鼠标的相对移动（mousemove），释放鼠标时结束操作（mouseup）。
2. **更新位置**: 根据鼠标的位置变化调整Canvas元素的坐标，使其跟随用户的拖动。

canvas.addEventListener('mousedown', startDrag);
canvas.addEventListener('mousemove', drag);
canvas.addEventListener('mouseup', stopDrag);

function startDrag(event) {
    // 记录开始位置
    initialMousePos = { x: event.clientX, y: event.clientY };
}

function drag(event) {
    // 更新元素位置
    let dx = event.clientX - initialMousePos.x;
    let dy = event.clientY - initialMousePos.y;
    element.x += dx;
    element.y += dy;
}

function stopDrag() {
    // 清除事件监听
}

**放大缩小功能：**
Canvas缩放可以利用CSS的`transform`属性，比如`scale()`函数，动态改变其内容的大小。也可以通过JavaScript动态修改绘图上下文的`transform`属性。

function zoomIn() {
    ctx.scale(scaleFactor, scaleFactor); // 其中scaleFactor大于1
}

function zoomOut() {
    ctx.scale(1 / scaleFactor, 1 / scaleFactor); // 返回原比例
}

使用时需要处理边界限制，并确保缩放后的图像仍然清晰。