Canvas坐标系原点在左上角，x向右、y向下递增，单位为CSS像素；但getImageData等像素操作基于渲染分辨率下的实际像素，而非CSS尺寸，这是模糊与错位的根源。
Canvas 的坐标系原点在左上角，x 向右递增，y 向下递增，单位是 CSS 像素；但像素操作（如 getImageData）基于的是**渲染分辨率下的实际像素**，不是 CSS 显示尺寸——这是理解偏差和图像模糊/错位的根源。
Canvas 的两种尺寸：CSS 尺寸 vs 渲染尺寸
Canvas 元素有两套尺寸：
-
CSS 尺寸：通过
style.width/style.height或 CSS 设置，仅控制显示大小，不改变绘图表面容量； -
渲染尺寸（画布内在分辨率）：由
canvas.width/canvas.height属性决定，代表实际可绘制的像素数量。
若只设 CSS 尺寸而未同步设置 width/height 属性，浏览器会按默认 300×150 像素渲染，再拉伸显示，导致图形模糊、线条发虚。正确做法是显式设置：
const canvas = document.getElementById('myCanvas');<br>const dpr = window.devicePixelRatio || 1;<br>canvas.width = canvas.clientWidth * dpr;<br>canvas.height = canvas.clientHeight * dpr;<br>const ctx = canvas.getContext('2d');<br>ctx.scale(dpr, dpr); // 让绘图逻辑仍按 CSS 像素写坐标系与像素对齐的关键细节
Canvas 绘图时，线宽、描边路径、填充区域都以“像素中心”为基准。例如：
立即学习“前端免费学习笔记（深入）”；
- 画一条从 (0,0) 到 (100,0) 的 1px 水平线，若未对齐像素中心（如 y=0.5），可能被渲染为半透明抗锯齿线；
- 填充一个矩形
fillRect(0, 0, 10, 10)，实际覆盖的是像素方格 [0,10) × [0,10)，即第 0 行到第 9 行、第 0 列到第 9 列的整数像素； - 要绘制清晰的 1px 边框，推荐将坐标偏移 0.5：如
strokeRect(0.5, 0.5, 100, 100)，确保路径落在像素中心线上。
像素读写必须匹配渲染分辨率
调用 ctx.getImageData(x, y, w, h) 读取的是当前 canvas.width/canvas.height 定义的像素网格中的数据，不是 CSS 尺寸对应的位置。常见错误：
- 用户点击 CSS 坐标 (x, y)，直接传给
getImageData(x, y, 1, 1)→ 错误，需换算：realX = x * dpr，realY = y * dpr； - 缩放后未重置
canvas.width/height，导致getImageData返回低分辨率数据或越界； - 修改
ImageData.data后调用putImageData，但目标区域坐标未按实际像素定位，造成偏移。
响应式与高清屏适配规范
适配不同设备应遵循固定流程：
- 监听
window.resize和devicePixelRatio变化（可用matchMedia监听 dpr 变更）； - 每次更新前清空 canvas（
canvas.width = canvas.width是最快重置方式）； - 重新设置
width/height为client× * dpr，再调用ctx.scale(dpr, dpr)； - 所有坐标输入（鼠标、触摸、动画位置）统一乘以 dpr 再用于像素操作或绘制。
不复杂但容易忽略：绘图逻辑写的是“逻辑像素”，而底层操作必须落在“设备像素”网格上，中间的映射不能靠浏览器自动完成，必须手动管理。
