屏幕坐标系 vs 数学坐标系

1. 屏幕坐标系 vs 数学坐标系

数学坐标系

在传统的数学坐标系中：

• 原点 (0, 0) 位于平面的中心。
• x 轴向右为正方向。
• y 轴向上为正方向。
• 如果 y 减少，物体向下移动；如果 y 增加，物体向上移动。

屏幕坐标系

在大多数计算机图形系统（包括 HTML5 的 <canvas>）中：

• 原点 (0, 0) 位于画布的左上角。
• x 轴向右为正方向。
• y 轴向下为正方向。
• 如果 y 增加，物体向下移动；如果 y 减少，物体向上移动。

2. 为什么 y 减少会向上？

屏幕坐标系的方向

在屏幕坐标系中，y 轴的方向是向下的。这意味着：

• 当 y 值增加时，物体沿着屏幕向下移动。
• 当 y 值减少时，物体沿着屏幕向上移动。

视觉上的理解

假设我们有一个粒子，初始位置是 (x=100, y=500)。如果我们执行以下操作：

this.y -= 5; // 将 y 减少 5

这会让粒子从 (100, 500) 移动到 (100, 495)。由于屏幕坐标系的 y 轴向下为正，y 减少意味着粒子朝屏幕的上方移动。

3. 如果 y 变为负值会发生什么？

屏幕坐标系的限制

在屏幕坐标系中，y 坐标的范围通常是 [0, canvas.height]，其中：

• y = 0 表示画布的顶部。
• y = canvas.height 表示画布的底部。

如果 y 减少到小于 0，则粒子的位置将超出画布的顶部边界。在这种情况下：

• 粒子可能不再可见（因为它超出了画布的范围）。
• 或者你可以通过额外的逻辑处理（如裁剪或重新定位），让粒子重新进入画布。

负值不会出现在“下半轴”

在屏幕坐标系中，y 轴没有“下半轴”的概念。即使 y 变为负值，它也不会出现在画布的下方，而是简单地超出画布的顶部边界。