1. 坐标系这章为什么我建议你当“编程基础”来学平面直角坐标系在数学课本里通常是“第七章”的位置很多同学把它当成一节需要背象限、背坐标符号的章节学完就忘。但我做项目这些年最大的体会是坐标系不是数学专属概念它是一套“位置描述语言”。这套语言在JavaScript里同样天天出现——canvas画图、拖拽交互、图表渲染、游戏碰撞检测底层全在跟坐标打交道。而JavaScript标准库里专门负责这些计算的就是Math对象以及和日期、异常处理紧紧绑定的那一整套工具。所以这篇内容我打算换个讲法不按教科书顺序念知识点而是把“math”和“平面直角坐标系”拆开来看——先搞懂数学坐标系里每个概念为什么存在再把它们翻译成JavaScript能跑的代码。无论是正在学初中数学的同学还是刚接触前端想搞懂canvas坐标的新人都能从中拿到一套能直接用的思路。适合谁第一类是数学上刚学到“有序数对”和“函数图像”的人你需要的是把概念背后的逻辑吃透第二类是写代码时遇到“坐标算不对”“点画偏了”的人你需要的是把数学坐标和屏幕坐标之间的转换关系焊死在心里。这两类需求其实是一个问题。2. 核心概念拆解先别再背象限先理解“为什么”2.1 坐标系本质上是给平面做了一套“地址编码”在没有坐标系的时候描述一个位置靠的是“往前走多少、往左拐多少”这种描述依赖参照物换个起点就废了。笛卡尔坐标系做的事情是先在平面上定一个原点O再画两条互相垂直、有方向、有刻度的数轴——x轴和y轴。一旦这套框架定好平面上任何一个位置都可以用唯一的数对(x, y)表示。这个“唯一”很关键它意味着坐标就是平面上每个点的“身份证号”。这套思路在编程里叫“编码和解码”。你的大脑看地图是“那个路口往东三百米”但计算机只认数字。你把位置编码成(300, 200)程序才能处理。反过来程序算完给你输出(150, -80)你也得能解码出“原点右侧150、下方80”。坐标系就是这两端的共同协议。这个认知比记住“第一象限、第二象限-”重要得多。2.2 有序数对顺序错了位置就错了很多初学者栽在“(3, 2)”和“(2, 3)”上。表面看只是两个数字换了个顺序实际上这套编码规则明确规定了第一个数必须是横坐标x第二个数必须是纵坐标y。因为x轴和y轴的单位长度可以不同顺序一旦颠倒定位结果就完全不同。这个规则在JavaScript里同样严格数组也好、对象也好你输出坐标时如果x、y混了画出来的图形会整体做镜像翻转。我建议所有人把这个规则内化成一种肌肉记忆写坐标相关代码时永远先写x再写y。数学题里这样写canvas里fillRect(x, y, w, h)也这样传事件对象里的clientX、clientY还是这个顺序。如果哪次你发现图形横纵颠倒了先怀疑的不是公式而是参数顺序。2.3 象限和坐标轴上的点正负号才是本质象限划分不是人为规定而是由x、y取正负时组合出来的四种区域。第一象限x0、y0第二象限x0、y0第三象限x0、y0第四象限x0、y0。注意顺序是逆时针从右上开始转的。坐标轴上的点比较特殊x轴上的点y0y轴上的点x0原点两个都为0。考试里的经典陷阱就是“点(a, b)在y轴上”让你求a其实只要b随便、a必须等于0。我在调试代码时见过很多次类似问题判断一个点落在第几象限很多人写成x 0 y 0这种四个分支但漏了“等于0”的情况。坐标轴上的点不属于任何象限如果你的业务需求是“落在x轴上也要算某个区域”就需要在分支前面加边界判断。数学没商量好边界代码就会给你返回一个模棱两可的结果。2.4 距离公式和中点公式从勾股定理到一行代码平面直角坐标系里最重要的两个衍生公式一是两点间距离二是中点坐标。两点距离的几何意义就是直角三角形的斜边把P1(x1, y1)和P2(x2, y2)的横纵差当成两条直角边斜边就是距离。公式写出来是√[(x2-x1)² (y2-y1)²]听着抽象但你可以这样想——你先水平走|x2-x1|再竖直走|y2-y1|两点之间直线距离就是那个“斜着走”的路线。翻译成JavaScript最直白的写法是function distance(x1, y1, x2, y2) { const dx x2 - x1; const dy y2 - y1; return Math.sqrt(dx * dx dy * dy); }这里Math.sqrt是开平方dx * dx是平方。后来我用多了发现ES6之后其实有个更贴心的函数Math.hypot它可以直接把所有参数当成直角边求斜边function distance(x1, y1, x2, y2) { return Math.hypot(x2 - x1, y2 - y1); }Math.hypot最大的好处是内部做了数值稳定性处理参数特别大或者特别小的时候比手动平方再开方更不容易丢精度。这个细节就是“会用Math”和“精通Math”的区别。中点公式更简单x轴方向取两数平均值y轴方向取两数平均值((x1 x2) / 2, (y1 y2) / 2)。它背后的逻辑是“中点的横坐标到两端横坐标的距离相等”。3. 从数学坐标系到JavaScript屏幕坐标系方向相反是第一课3.1 为什么你的点总是画“歪”了新手第一次用canvas画坐标点十有八九会遇到“我在(100, 100)画了个点怎么跑到右上角去了”的困惑。原因很简单数学坐标系的原点在左下y轴向上为正而屏幕坐标系的原点在左上角x轴向右为正y轴向下为正。换句话说屏幕坐标系就是数学坐标系“上下颠倒”后的结果。这个差异不是bug是历史遗留。屏幕的扫描顺序从左上角开始所以(0, 0)在左上。理解这点之后你就知道不能把数学坐标直接塞给canvas。你需要一套“坐标转换函数”把数学坐标(x, y)转成屏幕像素坐标(px, py)。假设画布中心是原点缩放比例是scale那么function toScreen(x, y, originX, originY, scale) { return { px: originX x * scale, py: originY - y * scale // 关键y方向取反 }; }反过来把鼠标点击的屏幕像素坐标转回数学坐标就是反向操作function toMath(px, py, originX, originY, scale) { return { x: (px - originX) / scale, y: (originY - py) / scale }; }这个“负号”是我见过最多的坐标系bug来源。哪怕你记得转换也可能在某个函数里少写一个负号导致所有点的y轴都镜像。排查方法我后面会细说这里先记住只要看到“图形上下反了”第一反应就找公式里的符号。3.2 Math对象就是你的坐标计算工具箱平面直角坐标系中大量操作都是“数值计算”而JavaScript的Math对象几乎把这些工具都备齐了。除了前面提到的Math.sqrt、Math.hypot还有几个高频选手Math.abs算距离差的时候拿绝对值对应“不管方向只关心差多少”Math.pow做幂运算比如(x2 - x1) ** 2等价于Math.pow(x2 - x1, 2)Math.max和Math.min求边界比如判断一个点是否在可视范围内Math.round、Math.floor、Math.ceil把计算结果对齐到整数像素避免出现半个像素的模糊线Math.atan2计算点和原点连线与x轴的夹角做旋转、方向判断非常好用。其中Math.atan2(y, x)值得单独说。它和Math.atan(y / x)不一样atan2能自动处理x为0的情况还能根据x、y的符号判断象限返回值范围在-π到π之间。如果你要做一个“瞄准”功能比如从点A向点B画一条带箭头的线用Math.atan2(dy, dx)算角度再配合Math.cos、Math.sin算箭头的两个翅膀整套逻辑非常顺。这四个函数组合起来已经能覆盖坐标系里七八成的问题。3.3 时间也是一条坐标轴Math和Date、异常处理的交叉点说到“javascript学习手册十二math、日期和异常处理”这个话题很多人觉得这三个东西是独立的但我在做图表项目时发现时间序列数据其实就是坐标系的一种特例x轴是时间戳y轴是某个数值。JavaScript里处理时间坐标的核心是Date对象而Date对象和Math的交叉点也特别多。最典型的是“两个日期之间隔了几天”。常规做法是把日期转成毫秒时间戳再Math计算const msPerDay 24 * 60 * 60 * 1000; const start new Date(2025-01-01T00:00:00); const end new Date(2025-01-10T00:00:00); const diffDays Math.round(Math.abs(end.getTime() - start.getTime()) / msPerDay);这里getTime()返回的是自1970年1月1日00:00:00以来的毫秒数这个数字本质就是一个一维坐标轴上的坐标。而Math.abs在这里体现的正是“距离只关心大小、不关心谁前谁后”——和平面坐标系里两点距离公式的思想一模一样。那异常处理呢因为你永远不知道用户会传什么日期格式进来。new Date(2025-13-45)这种输入不会报错但会返回一个Invalid Date。如果你不做检查就直接拿它做坐标计算所有结果都会变成NaN。正确做法是校验后再计算function diffDays(start, end) { const s new Date(start); const e new Date(end); if (isNaN(s.getTime()) || isNaN(e.getTime())) { throw new Error(非法日期无法计算时间坐标差); } return Math.round(Math.abs(e.getTime() - s.getTime()) / msPerDay); }调用的时候再用try/catch包一层。这正好对应了“异常处理”的意义坐标系里的计算链很长任何一个环节输入脏数据后面全崩。与其让NaN默默传播到画布上显示一个诡异位置不如在入口就拦截掉。4. 实操30分钟搭一个平面直角坐标系演示工具4.1 需求拆解这个工具要解决什么问题理论说再多不如亲手跑一遍。我建议你做一个“坐标可视化小工具”功能只有三个显示带网格的坐标系点击画布任意位置把该点的数学坐标显示出来再加两个点实时算它们之间的距离。这三件事涵盖了坐标转换、Math计算、事件处理、异常处理刚好把前文所有知识点串起来。实现方式用纯HTML Canvas JavaScript不需要任何框架。整个画布设成600×600坐标系原点设在画布正中央(300, 300)每格代表30个像素这样x轴和y轴能画出-10到10的范围。比例scale定为30原点originX、originY都是300。这些东西先用常量定义好后面所有计算都引用它们不要散落在代码各个角落写死数字。4.2 搭建画布和基础坐标系HTML结构非常简单一个canvas加一个信息面板canvas idcoordCanvas width600 height600/canvas div idinfo请在画布上点击/divJavaScript初始化部分const canvas document.getElementById(coordCanvas); const ctx canvas.getContext(2d); const ORIGIN_X 300; const ORIGIN_Y 300; const SCALE 30; function drawGrid() { ctx.strokeStyle #e5e5e5; ctx.lineWidth 1; // 画竖线 for (let px ORIGIN_X; px canvas.width; px SCALE) { ctx.beginPath(); ctx.moveTo(px, 0); ctx.lineTo(px, canvas.height); ctx.stroke(); } // 画横线同理 for (let py ORIGIN_Y; py canvas.height; py SCALE) { ctx.beginPath(); ctx.moveTo(0, py); ctx.lineTo(canvas.width, py); ctx.stroke(); } }画网格时有个容易忽略的细节负半轴也要画。很多人在循环里只写了从原点向右、向下结果只有第一象限有网格。正确做法是从原点开始分别向两个方向推进或者用for (let px ORIGIN_X % SCALE; px canvas.width; px SCALE)这种方式从第一个对齐点开始。总之网格要覆盖整个画布而不只是正象限。4.3 画坐标轴和刻度注意坐标轴上的“正方向标记”坐标轴和普通网格线不同需要用更粗的线、加箭头、写刻度值。x轴和y轴都经过原点(300, 300)所以可以画两条十字线function drawAxes() { ctx.strokeStyle #333; ctx.lineWidth 2; // x轴 ctx.beginPath(); ctx.moveTo(0, ORIGIN_Y); ctx.lineTo(canvas.width, ORIGIN_Y); ctx.stroke(); // y轴 ctx.beginPath(); ctx.moveTo(ORIGIN_X, 0); ctx.lineTo(ORIGIN_X, canvas.height); ctx.stroke(); }刻度线画在坐标轴上每30像素标注一个整数坐标值。刻度的文字注意一点x轴的刻度文字应该画在x轴下方一点y轴的刻度文字画在y轴左侧一点否则文字会被坐标轴压住。箭头可以在轴末端画两个小三角这个属于锦上添花但能很直观地表达“x轴正方向向右、y轴正方向向上”这个数学约定对教学场景帮助很大。4.4 把鼠标位置变成数学坐标事件处理的关键代码点击事件里拿到的event.offsetX和event.offsetY是相对于canvas左上角的像素坐标。注意offsetX、offsetY是相对事件目标而言的如果你把监听器绑在canvas上它们就是canvas内的坐标。然后用逆变换函数转成数学坐标canvas.addEventListener(click, (e) { const px e.offsetX; const py e.offsetY; const x (px - ORIGIN_X) / SCALE; const y (ORIGIN_Y - py) / SCALE; // 四舍五入到一位小数避免浮点误差 const roundedX Math.round(x * 10) / 10; const roundedY Math.round(y * 10) / 10; drawPoint(px, py, roundedX, roundedY); updateInfo(roundedX, roundedY); });这里用Math.round(x * 10) / 10是为了把无限小数整理成友好格式。浮点计算里(100 - 300) / 30往往得到-6.666666666666667直接显示太难看。这个“四舍五入到指定位数”的小技巧同样可以用toFixed(1)实现但要小心toFixed返回的是字符串。点画多大半径3像素即可。如果点太小看不清半径5像素也可以但要注意点的中心才是真实坐标。很多人画点的时候直接用arc(px, py, r, 0, 2 * Math.PI)这将让点在视觉上比真实位置大一圈。在表现单个点时没问题但如果你要做像素级的点击命中检测就必须用真实坐标做判断。4.5 加两个点实时算距离和象限为了把Math对象用全可以做成“记录最近两个点击的点”自动计算距离并显示const points []; function updateInfo(x, y) { points.push({ x, y }); if (points.length 2) points.shift(); const info document.getElementById(info); let text 当前点: (${x}, ${y}); if (points.length 2) { const [p1, p2] points; const dist Math.hypot(p2.x - p1.x, p2.y - p1.y); text | 两点距离: ${dist.toFixed(2)}; } info.textContent text; }这段代码有几个可以深挖的点。第一Math.hypot(p2.x - p1.x, p2.y - p1.y)正是前面讲的距离公式这里不需要手动平方开方。第二toFixed(2)不只是为了显示它隐含了“浮点数比较不靠谱”这个坑如果你直接用if (dist 0)判断两点重合可能因为浮点误差永远不成立用Math.abs(dist) 1e-6才靠谱。第三points.length 2时用shift()把旧点丢掉这种“滑动窗口”的思路在很多坐标追踪场景里都会用到比如记录鼠标轨迹、回放操作步骤。象限判断也顺手做掉function getQuadrant(x, y) { if (x 0 y 0) return 第一象限; if (x 0 y 0) return 第二象限; if (x 0 y 0) return 第三象限; if (x 0 y 0) return 第四象限; if (x 0 y 0) return 原点; if (x 0) return y轴上; return x轴上; }这个函数体现了坐标轴边界点的特殊处理正好和2.3里数学课本的规定一致。注意我的判断顺序先判断四个象限再判断原点和坐标轴。如果反着来比如先判断x 0原点就会被误判为“y轴上”虽然也能运行但语义就不准确了。5. 常见问题与排查技巧实录5.1 点的y坐标上下颠倒先查转换函数符号这是我在评论区被问得最多的问题“老师我按你的代码写了为什么点(2, 3)画出来在右下角”答案99%是你在toScreen里把py ORIGIN_Y - y * SCALE写成了py ORIGIN_Y y * SCALE。数学坐标y为正应该在屏幕上方所以必须用减。这个符号问题我建议你用“代入法”排查手动算一遍(2, 3)应该落在(360, 210)的位置然后在代码里加一句console.log(px, py)对比就知道哪一步错了。很多人还会把toScreen和toMath搞混。记住两条规律数学转屏幕要“乘比例再加偏移”屏幕转数学要“减偏移再除比例”。方向相反顺序相反。如果你觉得两个函数长得太像容易晕可以给它们起更形象的名字mathToScreen和screenToMath别用convert1、convert2这种名字。5.2 点击位置和画的点不重合检查offsetX的坑offsetX、offsetY在大多数情况下很好用但有一个隐藏风险如果canvas外面包了一层带边框的容器或者canvas本身有CSS缩放offsetX和offsetY可能不是真正的canvas像素坐标。更稳妥的做法是用getBoundingClientRect计算canvas.addEventListener(click, (e) { const rect canvas.getBoundingClientRect(); const px e.clientX - rect.left; const py e.clientY - rect.top; });这背后的原理是clientX/clientY是相对于浏览器视口的坐标rect.left/rect.top是canvas相对于视口的左上角位置两者相减就是canvas内的相对坐标。如果你用了window.devicePixelRatio做高清适配还要额外除以缩放比。这里犯的错很隐蔽但症状很典型——“我点在网格十字交叉点上画出来的点却隔了一小段距离还越来越偏”。遇到这种先检查有没有CSS缩放再检查有没有高清适配。5.3 距离计算出现NaN入口数据没过校验NaN是坐标系开发里最恼人的错误之一。它的特点是会传染任何一个参数是NaN整个计算结果就变成NaN而且不报错页面显示一片空白或者一个冤枉的位置。我排查这种问题的顺序是检查输入参数是不是数字typeof x number检查是不是NaNNumber.isNaN(x)检查是不是无穷大Number.isFinite(x)检查是不是字符串数字偷偷混进来了比如从input.value拿到的值是字符串33 * 2虽然能算出6但3 2会变成32一旦参与运算就全乱套。解决方案就是套一层“参数校验函数”function assertNumber(value, name) { if (typeof value ! number || !Number.isFinite(value)) { throw new TypeError(${name} 必须是有限数字); } }然后把所有对外暴露的函数入口都过一遍。这不是小题大做我在处理日期坐标轴时吃过一次大亏后端返回的日期字符串有的带时区、有的不带换算时间戳后偶尔出现NaN导致图表上整条曲线消失。用异常处理把这种“周期性出现、毫无规律”的问题挡在计算外面是最省时的策略。5.4 画布高DPI适配坐标轴线条发虚的解法如果你把canvas画出来放大看会发现文字和线条雾蒙蒙的。这是因为普通屏幕的CSS像素和物理像素不是1:1。在高分屏上canvas默认按CSS像素绘制但实际渲染像素更多浏览器做了缩放导致发虚。解决方法是让canvas的物理尺寸等于CSS尺寸乘以devicePixelRatioconst dpr window.devicePixelRatio || 1; canvas.width 600 * dpr; canvas.height 600 * dpr; canvas.style.width 600px; canvas.style.height 600px; ctx.scale(dpr, dpr);注意这会让画布坐标系整体放大之前所有基于canvas.width和canvas.height的计算都需要调整。我的习惯是逻辑尺寸永远固定为600只有画布实际像素根据dpr变化。这个适配做完后坐标轴发虚的问题会明显改善但代价是代码量增加一点。对于演示工具来说不做也能用如果你是做正式的可视化产品这一步绕不开。5.5 日期坐标轴的坑时区、非法输入和Math的配合回到“math、日期和异常处理”这个组合。用时间做坐标轴时最典型的坑是日期字符串的解析不一致。new Date(2025-01-01)在多数浏览器里被当成UTC时间解析而new Date(2025/01/01)被当成本地时间两者相差8个小时在按天计算时间坐标差值时会出现“差一天”的诡异现象。统一做法是自己手动解析function parseDate(input) { const match String(input).match(/^(\d{4})-(\d{2})-(\d{2})$/); if (!match) throw new Error(日期格式不合法需要YYYY-MM-DD); const [, y, m, d] match; return new Date(Number(y), Number(m) - 1, Number(d)); }这里有两个细节月份从0开始计数所以要减1手动构造本地时间而不是字符串解析避开时区分歧。之后再拿getTime()做时间坐标差值用Math.round处理浮点配合Math.abs保证正数整个过程就稳定了。异常处理在这里不是可有可无的装饰而是每次计算前的安全网。6. 我的一点实操心得做坐标系相关项目这几年我觉得最有价值的习惯是“先画草图再写代码”。哪怕是一个很小的canvas工具我也会先在纸上画一个6×6的网格标出原点、坐标方向、刻度位置再想想哪些点应该显示、哪些公式要套用。草图能帮你理清坐标变换顺序避免在代码里来回试错。很多同学写的坐标代码一看就是“写完就跑”逻辑没错但结构混乱因为脑子里没有坐标系图。另一个心得是Math对象不是背出来的是查出来的。我在项目中真正高频用到的其实只有Math.abs、Math.sqrt、Math.hypot、Math.max、Math.min、Math.round、Math.atan2这几个。不需要记全套API遇到不熟悉的需求去查文档就行。但“用Math之前先想清楚数学含义”这句话很关键很多bug不是因为API用错而是因为数学关系没想清楚比如该用距离公式却用了曼哈顿距离该用两点中点却取了平均值但忘了除2。最后分享一个可以继续做的扩展方向把这个坐标系工具加上“函数图像绘制”功能。输入一个像y x * x - 2的表达式遍历x从-10到10每次计算y再用mathToScreen转换后逐点连线。这一步做完你对“函数图像为什么是平滑曲线”的理解会比刷几十道题更深刻因为你会亲眼看到图像不是画出来的是一堆离散的坐标点按顺序连接出来的。这就是坐标系和Math对象组合起来最迷人的地方——抽象的公式最终变成了屏幕上看得见、摸得着的图形。