canvas坐标变换通过translate()和scale()将数学坐标系映射到像素坐标系，实现函数曲线高效实时缩放与平移；需重置变换矩阵、动态计算采样密度，并用settransform显式控制。
Canvas 坐标变换是实现函数曲线实时缩放的核心手段，关键在于把数学坐标系（如 y 向上为正）映射到 Canvas 像素坐标系（y 向下为正），再通过 scale() 和 translate() 动态控制视口。不直接操作数据点，而是调整绘图上下文的变换矩阵，既高效又保持曲线平滑。
建立数学坐标系与Canvas像素坐标的映射关系
函数图像默认在笛卡尔坐标系中绘制（原点居中、y 轴向上为正），而 Canvas 原点在左上角、y 向下增长。需用 ctx.translate() 将原点移到画布中心，再用 ctx.scale(1, -1) 翻转 y 轴：
- 设画布宽
width、高height，先调用ctx.translate(width/2, height/2) - 再调用
ctx.scale(1, -1)，此时 (0,0) 即画布中心，y 正方向朝上 - 后续所有坐标（如
sin(x)的点）可按数学习惯直接传入moveTo()/lineTo()
用 scale() 实现无失真缩放（含X/Y独立控制）
缩放不是放大路径，而是缩放坐标系单位：每 1 个数学单位对应多少像素。例如 scale(50, -50) 表示 x 和 y 方向每单位占 50 像素，且 y 已翻转；若想 X 放大 2 倍、Y 缩小 0.5 倍，就用 scale(100, -25)：
- 缩放前必须
ctx.setTransform(1,0,0,1,0,0)重置矩阵，避免叠加导致畸变 - 推荐封装缩放参数：
scaleX = 50 * zoomLevel，scaleY = -50 * zoomLevel * yScaleFactor - 每次重绘前执行：
ctx.setTransform(scaleX, 0, 0, scaleY, width/2, height/2)—— 一步完成平移+缩放+翻转
动态更新视口：响应鼠标滚轮或拖拽平移
缩放常伴随平移（如缩放到某点为中心）。核心是记录“逻辑原点”偏移量（即数学坐标系原点在 Canvas 中的像素位置），再在 setTransform 中补偿：
- 定义
offsetX、offsetY（单位：数学坐标），表示当前视口中心对应的数学坐标 - 滚轮缩放时，获取鼠标位置
(clientX, clientY)，换算成数学坐标(x0, y0)，再调整偏移使该点在缩放后仍“钉住”屏幕同一位置 - 平移时直接增减
offsetX、offsetY，重绘时传入ctx.setTransform(scaleX, 0, 0, scaleY, width/2 - offsetX*scaleX, height/2 + offsetY*scaleY)（注意 y 符号）
高效绘制动态曲线：分段采样 + requestAnimationFrame
函数曲线无需固定点数，应根据当前缩放级别动态调节采样密度，避免过密卡顿或过疏锯齿：
- 计算当前可见 x 区间：
xMin = offsetX - width/(2*scaleX)，xMax = offsetX + width/(2*scaleX) - 采样步长取
dx = Math.max(0.01, 1/scaleX)（保证每像素至少一个点） - 用
requestAnimationFrame驱动重绘，缩放/平移后仅更新变换矩阵和参数，不重建路径 - 对高频函数（如
sin(100x)），可先检测频率，局部加密采样，或改用 WebAssembly 加速计算
不复杂但容易忽略的是：所有变换必须在每次 beginPath() 前重置并重新设置，且不能依赖 save()/restore() 堆叠——实时交互中矩阵状态易失控。用 setTransform 显式构造，逻辑更清晰、性能更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
