（一）计算机图形学基础之向量加减_向量相减在通5g的应用-CSDN博客

本文链接：https://blog.csdn.net/cuijiying/article/details/144892168

了解向量的加减运算可以帮助你在处理图形和动画时更加得心应手。向量的加减运算在计算机图形学、物理模拟和3D渲染中有广泛的应用。接下来，我们将详细介绍向量的加减运算，并提供一些在前端开发中的应用示例。

向量的加法

向量的加法是指将两个向量的对应分量相加，得到一个新的向量。

公式：

给定两个向量 A 和 B：

A = (A1, A2)
B = (B1, B2)

它们的和 C 为：

C = A + B = (A1 + B1, A2 + B2)

例子：

假设有两个二维向量：

A = (1, 2)
B = (3, 4)

它们的和为：

C = A + B = (1 + 3, 2 + 4) = (4, 6)

向量的减法

向量的减法是指将一个向量的对应分量减去另一个向量的对应分量，得到一个新的向量。

公式：

给定两个向量 A 和 B：

A = (A1, A2)
B = (B1, B2)

它们的差 C 为：

C = A - B = (A1 - B1, A2 - B2)

例子：

假设有两个二维向量：

A = (1, 2)
B = (3, 4)

它们的差为：

C = A - B = (1 - 3, 2 - 4) = (-2, -2)

图解总结：
在这里插入图片描述

在前端开发中的应用

在前端开发中，向量运算可以用于处理动画、碰撞检测、物理模拟等。下面是一个使用JavaScript实现向量加减运算的示例，并展示如何在动画中使用它们。

实现向量加减运算的JavaScript代码

// 定义一个向量类
class Vector {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  // 向量加法
  add(vector) {
    return new Vector(this.x + vector.x, this.y + vector.y);
  }

  // 向量减法
  subtract(vector) {
    return new Vector(this.x - vector.x, this.y - vector.y);
  }
}

// 示例向量
let A = new Vector(1, 2);
let B = new Vector(3, 4);

// 向量加法
let C_add = A.add(B);
console.log(`向量A与B的和: (${C_add.x}, ${C_add.y})`);

// 向量减法
let C_subtract = A.subtract(B);
console.log(`向量A与B的差: (${C_subtract.x}, ${C_subtract.y})`);

在动画中的应用示例

下面是一个使用向量加法实现的简单动画示例，展示一个物体沿着向量方向移动：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>向量动画示例</title>
  <style>
    #canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');

    class Vector {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }

      add(vector) {
        return new Vector(this.x + vector.x, this.y + vector.y);
      }
    }

    // 初始位置和速度向量
    let position = new Vector(50, 50);
    const velocity = new Vector(2, 3);

    function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      
      // 更新位置
      position = position.add(velocity);

      // 画一个小圆表示物体
      context.beginPath();
      context.arc(position.x, position.y, 10, 0, 2 * Math.PI);
      context.fillStyle = 'red';
      context.fill();

      requestAnimationFrame(draw);
    }

    draw();
  </script>
</body>
</html>