HTML canvas标签的坐标系原点位置？绘图偏移量计算逻辑-html教程-PHP中文网

canvas坐标系原点默认在左上角，x向右、y向下递增；需通过translate和scale变换实现数学坐标系；绘图坐标须区分canvas.width/height与css尺寸，数据映射y值应基于minval/maxval线性计算。

html canvas标签的坐标系原点位置？绘图偏移量计算逻辑

canvas坐标系原点默认在左上角

HTML <canvas></canvas> 的坐标系原点就是画布左上角像素点，即 (0, 0)。x 向右递增，y 向下递增——这不是 bug，是 W3C 标准行为，和 CSS 布局、Android Canvas、WebGL 一致。

这意味着：fillRect(0, 0, 100, 100) 会紧贴画布左上角绘制；strokeText("A", 0, 0) 的文字基线几乎会切掉顶部像素（因文字向下延伸）。

常见错误现象：

用数学思维写 drawCircle(x, y, r)，结果圆总出现在“意料之外”的位置
把 SVG 或 Matplotlib 坐标逻辑直接搬进 canvas，y 值全反了
没注意 canvas.width/canvas.height 和 CSS width/height 不等价，导致坐标漂移

绘图偏移量必须区分「CSS尺寸」和「渲染分辨率」

canvas 实际绘图区域由两个独立控制项决定：

canvas.width 和 canvas.height 属性：定义**内部位图的像素宽高**（即 getImageData 操作的真实像素数）
CSS width / height：仅控制 canvas 元素在页面上的**显示尺寸**（缩放渲染）

当二者不一致（比如 canvas.width=600，但 CSS width: 300px），所有坐标值仍按 600px 宽度计算，但被压缩到 300px 显示——这会导致：

鼠标事件返回的 clientX/clientY 需经 getBoundingClientRect() + devicePixelRatio 校准才能映射回真实绘图坐标
用 ctx.scale(0.5, 0.5) 手动缩放不如直接设属性，否则易叠加失真
getImageData(x, y, w, h) 的 x, y 是基于 width/height 的整数像素，不是 CSS 像素

需要数学坐标系时，用 translate + scale 组合切换

想让 (0, 0) 在画布中心、y 向上为正（如画函数图像、物理仿真），不能靠“脑内换算”，应通过坐标变换重置系统：

const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
<p>ctx.translate(centerX, centerY); // 原点移到中心
ctx.scale(1, -1);                // y 轴翻转：向下变向上</p>

此时调用 lineTo(0, 100) 就真往上画 100 像素；arc(0, 0, 50, 0, Math.PI * 2) 画出居中圆。