图形学与坐标系入门教学

在计算机图形学的世界里，坐标系是构建和操作图形的基础。无论是绘制简单的线条、复杂的三维模型，还是实现炫酷的动画效果，都离不开对坐标系的理解和运用。接下来，我们将深入探讨图形学中常见的坐标系以及如何使用 JavaScript 进行相关操作。

一、常见坐标系介绍

1. 笛卡尔坐标系

笛卡尔坐标系是最基础也是最常用的坐标系。它由三条相互垂直的轴组成：X 轴、Y 轴和 Z 轴。在二维平面中，只需要 X 轴和 Y 轴就可以确定一个点的位置。X 轴通常表示水平方向，向右为正方向；Y 轴表示垂直方向，向上为正方向。在三维空间中，Z 轴垂直于 XY 平面，向前为正方向。

例如，在二维笛卡尔坐标系中，点 (3, 4) 表示在 X 轴正方向距离原点 3 个单位，在 Y 轴正方向距离原点 4 个单位的位置。

2. 屏幕坐标系

屏幕坐标系是计算机图形学中针对屏幕显示的坐标系。与笛卡尔坐标系不同，屏幕坐标系的原点通常位于屏幕的左上角，X 轴向右为正方向，Y 轴向下为正方向。这是因为计算机屏幕是从左上角开始逐行扫描显示内容的。

在屏幕坐标系中，假设屏幕宽度为 800 像素，高度为 600 像素，那么屏幕右下角的坐标就是 (799, 599) 。

3. 局部坐标系与世界坐标系

局部坐标系：也称为物体坐标系，是为每个物体单独定义的坐标系。在局部坐标系中定义物体的形状和位置，方便对物体进行独立的操作和变换。例如，绘制一个正方形，我们可以在它的局部坐标系中定义四个顶点的坐标。

世界坐标系：是一个全局的坐标系，用于将所有物体统一到一个空间中。当我们需要将多个物体组合在一起时，就需要将它们从局部坐标系转换到世界坐标系下。

二、使用 JavaScript 进行图形绘制与坐标系操作

在 JavaScript 中，我们可以使用canvas元素来进行图形绘制，下面通过一些示例来展示如何结合坐标系进行操作。

1. 基础绘制

首先，创建一个canvas元素，并获取其上下文对象：

js 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Canvas Graphics</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
  </script>
</body>
</html>

接下来，在屏幕坐标系下绘制一个矩形：

js 复制代码

ctx.fillStyle ='red';
ctx.fillRect(50, 50, 100, 80);

这里的fillRect方法接收四个参数，分别是矩形左上角在屏幕坐标系中的 X 坐标、Y 坐标，以及矩形的宽度和高度。上述代码会在距离屏幕左边缘 50 像素，距离上边缘 50 像素的位置，绘制一个宽 100 像素，高 80 像素的红色矩形。

2. 坐标变换

在图形学中，经常需要对图形进行平移、旋转、缩放等变换操作，这些操作本质上是对坐标系的变换。

平移变换

使用translate方法可以实现平移操作：

js 复制代码

ctx.translate(100, 100);
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 100, 80);

这里先将坐标系的原点平移到 (100, 100) 的位置，然后在新的坐标系下，以 (0, 0) 为左上角坐标绘制一个蓝色矩形。实际上，这个蓝色矩形在原来的屏幕坐标系中的位置是 (100, 100)。

旋转变换

使用rotate方法可以实现旋转操作，参数为旋转的弧度：

js 复制代码

ctx.translate(200, 200);
ctx.rotate(Math.PI / 4);
ctx.fillStyle = 'green';
ctx.fillRect(-50, -40, 100, 80);

上述代码先将坐标系原点平移到 (200, 200)，然后将坐标系顺时针旋转 45 度（Math.PI / 4弧度），最后绘制一个绿色矩形。由于坐标系发生了旋转，矩形也会跟着旋转。

缩放变换

使用scale方法可以实现缩放操作：

js 复制代码

ctx.translate(300, 300);
ctx.scale(2, 0.5);
ctx.fillStyle = 'purple';
ctx.fillRect(0, 0, 50, 80);

这里将坐标系原点平移到 (300, 300)，然后在 X 方向上放大 2 倍，在 Y 方向上缩小为原来的 0.5 倍，最后绘制紫色矩形。原本宽 50 像素、高 80 像素的矩形，在变换后宽度变为 100 像素，高度变为 40 像素。

三、坐标系转换

在实际应用中，常常需要在不同坐标系之间进行转换。例如，从局部坐标系转换到世界坐标系，或者从世界坐标系转换到屏幕坐标系进行显示。

假设我们有一个物体在局部坐标系下的顶点坐标，要将其转换到世界坐标系下，可以通过一系列的矩阵变换来实现。虽然 JavaScript 中没有直接的矩阵运算类，但我们可以通过数组来模拟矩阵，并编写相应的函数来进行矩阵乘法等操作。以下是一个简单的二维矩阵变换示例：

js 复制代码

// 定义二维矩阵乘法函数
function matrixMultiply(a, b) {
  const result = [[0, 0], [0, 0]];
  for (let i = 0; i < 2; i++) {
    for (let j = 0; j < 2; j++) {
      for (let k = 0; k < 2; k++) {
        result[i][j] += a[i][k] * b[k][j];
      }
    }
  }
  return result;
}
// 定义平移矩阵
function createTranslationMatrix(tx, ty) {
  return [[1, 0, tx], [0, 1, ty], [0, 0, 1]];
}
// 定义一个点在局部坐标系下的坐标
const localPoint = [1, 1, 1];
const translationMatrix = createTranslationMatrix(50, 50);
// 进行坐标转换
const worldPoint = [];
for (let i = 0; i < 3; i++) {
  let sum = 0;
  for (let j = 0; j < 3; j++) {
    sum += translationMatrix[i][j] * localPoint[j];
  }
  worldPoint.push(sum);
}
console.log(worldPoint);

上述代码定义了矩阵乘法函数和创建平移矩阵的函数，通过将局部坐标系下的点与平移矩阵相乘，得到了该点在世界坐标系下的坐标。

通过以上内容，我们对图形学中的坐标系以及如何使用 JavaScript 进行相关操作有了一定的了解。在实际开发中，还会涉及到更复杂的坐标系转换和图形操作，但只要掌握了这些基础知识，就能更好地理解和处理图形学相关的问题。