HTML5中Canvas坐标系理解与像素操作规范-H5教程-PHP中文网

canvas坐标系原点在左上角，x向右、y向下递增，单位为css像素；但getimagedata等像素操作基于渲染分辨率下的实际像素，而非css尺寸，这是模糊与错位的根源。

html5中canvas坐标系理解与像素操作规范

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 绘图时，线宽、描边路径、填充区域都以“像素中心”为基准。例如：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

画一条从 (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，但目标区域坐标未按实际像素定位，造成偏移。