Canvas 的坐标系可以理解为以像素为单位，原点在左上角的数学坐标系。
核心规则
- 原点位置：原点
(0,0)位于画布的左上角。 - 轴方向：
- X 轴：水平向右为正方向。
- Y 轴：垂直向下为正方向。
- 单位：单位是像素，非矢量单位。
- canvas 坐标系是以像素的宽高为基底的。
- 栅格： 每一个格子就是一个像素，像素具有rgba 数据。
- canvas 画布的像素的数量： 等于画布的宽度乘以高度。
直观示意
假设一个 width=300, height=200 的画布：
(0,0) --- X+ ---> (300,0)
|
Y+
|
v
(0,200) (300,200)
与数学直角坐标系的区别
这是初学者最需要留意的区别：
| 特性 | 数学标准坐标系 | Canvas 坐标系 |
|---|---|---|
| 原点 | 左下角 | 左上角 |
| Y轴方向 | 向上为正 | 向下为正 |
| 角度 | 逆时针为正 | 顺时针为正（因为Y轴反向） |
例如，在 Canvas 上绘制圆弧或旋转图形时，0 弧度指向右方（3点钟方向），π/2 弧度指向下方（6点钟方向）。
2D 坐标变换
Canvas 提供了变换方法，可以将这个坐标系“改造”成你更熟悉的形式：
- 平移：
ctx.translate(x, y)—— 移动原点位置。 - 旋转：
ctx.rotate(angle)—— 绕原点旋转坐标系。 - 缩放：
ctx.scale(x, y)—— 缩放坐标单位。
技巧：模拟数学坐标系
如果你更习惯数学中的笛卡尔坐标系（原点在左下，Y轴向上），可以这样做：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
canvas.width = 500;
canvas.height = 500;
const ctx = canvas.getContext('2d');
// 添加canvas背景色
ctx.fillStyle = '#ADD8E6';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 1. 将原点平移到左下角
ctx.translate(0, canvas.height);
// 2. 将Y轴反转，使其向上为正
ctx.scale(1, -1);
// 现在，画布的原点就在左下角，Y轴向上为正
ctx.fillRect(20, 20, 50, 50); // 矩形将绘制在左下角向上的位置
</script>
</body>
</html>
注意：反转 Y 轴后，文本和图片会颠倒。绘制它们前需要临时恢复坐标系或单独处理。
总结
- 记住：Canvas 坐标 = 左上角原点 + Y轴向下。
- 注意：由此带来的角度方向（顺时针为正）。
- 进阶：熟练使用
translate、scale、rotate可以极大地简化复杂绘图逻辑。
如果你在三维 Canvas 上下文中（如使用 WebGL），还会有更复杂的 3D 坐标系，但标准 2D Canvas 遵循以上规则。
