Js canvas放大缩小

Canvas 是 HTML5 中的一个绘图 API，允许开发者直接在网页上绘制图形。如果你想在 Canvas 上实现放大和缩小的效果，通常有两种方式：

1. **视口缩放**（Viewport Scaling）：
- 使用 `requestAnimationFrame` 或 `window.devicePixelRatio` 可以调整浏览器窗口内的内容大小。通过设置 `canvas.width` 和 `canvas.height` 为屏幕宽度和高度乘以视口比例，可以达到缩放效果。
- 当用户缩放页面时，监听 `resize` 事件，并相应地更新画布尺寸。

2. **CSS Transform** 结合 SVG 矢量图形：
- 如果你只关心局部区域的放大，可以在 `<canvas>` 上创建一个 SVG 覆盖层，然后使用 CSS 的 `transform: scale()` 属性实现缩放。当改变缩放比例时，SVG 图形会按比例放大或缩小。

为了实现这两个功能，你需要在 JavaScript 中处理事件、计算新尺寸以及应用变换。下面是一个简单的示例代码片段：

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');

canvas.addEventListener('wheel', function(event) {
   // 阻止默认的滚动行为
   event.preventDefault();

   // 获取鼠标相对于canvas的位置和滚轮移动的距离
   let delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.deltaY)));
   let x = event.clientX - canvas.offsetLeft;
   let y = event.clientY - canvas.offsetTop;

   // 计算缩放因子并应用到画布
   let zoomFactor = 1 + delta * 0.1; // 这里是放大或缩小的比例
   let newWidth = canvas.width * zoomFactor;
   let newHeight = canvas.height * zoomFactor;

   // 更新画布尺寸
   canvas.width = newWidth;
   canvas.height = newHeight;

   // 重新渲染内容（例如，你可以在此处使用 ctx.drawImage() 或其他绘图函数）
});