Canvas像素坐标映射需四步算术运算：①用getBoundingClientRect()获渲染区域；②clientX/Y减rect.left/top得相对坐标；③除法算缩放比，乘法校正；④比较运算符边界检查。
Canvas 绘图中像素坐标与缩放比例的计算，本质是把“逻辑位置”准确映射到“物理像素”，核心靠运算符（+、−、×、÷）完成坐标偏移、比例换算和尺寸校正。不是调用某个 API 就自动生效，而是每一步都依赖基础算术运算支撑。
鼠标位置转画布内像素坐标的四步运算
鼠标事件返回的是视口坐标（clientX/clientY），而 Canvas 像素操作需要的是相对于画布左上角的整数像素位置。中间需用减法和除法校正：
- 用 getBoundingClientRect() 获取 canvas 在视口中的实际渲染区域：
const rect = canvas.getBoundingClientRect(); - 减去偏移：用鼠标坐标减去
rect.left和rect.top，得到相对画布左上角的位置：const x = e.clientX - rect.left;、const y = e.clientY - rect.top; - 处理 CSS 缩放：若 canvas 元素被 CSS 拉伸（如
width: 400px但canvas.width = 800），需按比例还原——用除法算出缩放因子：const scaleX = canvas.width / rect.width;，再用乘法校正：x = Math.floor(x * scaleX); - 边界检查：确保结果不越界，用比较运算符限制范围：
if (x >= 0 && x = 0 && y
等比缩放时的坐标与尺寸同步运算
要让图形视觉缩放且容器自适应，必须同时更新 canvas 物理尺寸与绘图逻辑，这涉及乘法、赋值和重置运算：
- 缩放比
s是一个浮点数（如 0.75 或 2.0），新物理尺寸由原尺寸 × 缩放比得出：canvas.width = Math.round(originalWidth * s);、canvas.height = Math.round(originalHeight * s); - 重设尺寸会清空画布，重绘前需重置变换矩阵：
ctx.setTransform(1, 0, 0, 1, 0, 0);——这是清除之前所有scale()、translate()累积影响的关键一步 - 若以鼠标为中心缩放，需先平移再缩放后反向平移，三步都依赖加减乘：
ctx.translate(mx, my); ctx.scale(s, s); ctx.translate(-mx, -my); - 后续鼠标交互（如拖拽）要还原真实画布坐标，用减法与除法逆推：
const realX = (mouseX - offsetX) / currentScale;
设备像素比（DPR）适配中的乘除组合
在高清屏上避免模糊，必须用 DPR 值放大 canvas 缓冲区并缩放绘图上下文，这里乘法与除法成对出现：
立即学习“Java免费学习笔记（深入）”；
- 获取设备像素比：
const dpr = window.devicePixelRatio || 1; - 用乘法设置 canvas 实际像素尺寸：
canvas.width = width * dpr;、canvas.height = height * dpr; - 用 CSS 设置显示尺寸（不带单位）：
canvas.style.width = width + 'px';、canvas.style.height = height + 'px'; - 用
scale(dpr, dpr)把绘图坐标系拉回 1:1 逻辑单位——这样写在 (10, 10) 的矩形，最终正好占满 10×dpr 个物理像素，不会因亚像素渲染变模糊
数据可视化中坐标轴比例的线性换算
把原始数据值映射到画布像素位置，本质是线性函数 y = kx + b，完全由加减乘除实现：
- x 方向缩放比：
const xScale = (canvas.width - padding * 2) / (data.length - 1); - y 方向缩放比（倒置，因 Canvas y 轴向下）：
const yScale = (canvas.height - padding * 2) / Math.max(...data); - 第 i 个点的像素坐标：
const px = i * xScale + padding;、const py = canvas.height - data[i] * yScale - padding; - 所有运算都保持整数或浮点精度可控，避免用
parseInt截断导致错位；必要时用Math.round()或Math.floor()显式取整
