canvas坐标系原点默认在左上角，x向右、y向下递增；需通过translate和scale变换实现数学坐标系；绘图坐标须区分canvas.width/height与CSS尺寸，数据映射y值应基于minVal/maxVal线性计算。
canvas坐标系原点默认在左上角
HTML <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和 CSSwidth/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 向上为正（如画函数图像、物理仿真），不能靠“脑内换算”，应通过坐标变换重置系统：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
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 轴翻转：向下变向上此时调用 lineTo(0, 100) 就真往上画 100 像素；arc(0, 0, 50, 0, Math.PI * 2) 画出居中圆。
关键提醒：
- 变换是累积的，重复
translate()会让原点越移越远 - 务必配合
ctx.save()/ctx.restore()隔离局部变换，尤其在循环绘图或嵌套组件中 -
setTransform(1, 0, 0, 1, 0, 0)可一键重置所有变换（比 restore 更彻底，但会丢弃 save 状态）
数据映射到 canvas 坐标时，y 偏移要减去计算高度
柱状图、折线图等可视化中，数据值 → canvas y 坐标最常出错。核心公式不是 y = value，而是：
y = topY + (maxVal - value) * scaleY
其中：
-
topY是绘图区顶部的 y 像素坐标（如margin.top） -
scaleY = height / (maxVal - minVal)（注意分母不能为 0） - 负值数据要先算出基线位置：
baselineY = topY + (0 - minVal) * scaleY，再分别向上/向下画矩形
硬编码 y = height - value 看似简单，但一旦加了 margin、padding、标题栏，立刻失效；永远以 minVal/maxVal 为基准做线性映射才是鲁棒做法。
真正容易被忽略的是：canvas 坐标系本身不可更改，所有“适配”都靠你在数据层或变换层处理——没有全局开关，只有每次绘图前的显式决策。
