本文将介绍如何使用 Canvas 和 JavaScript 创造一个逼真的旋转星空效果。我们将会涉及到一些基础概念，包括 Canvas 的基本操作和三维向量的计算。
Canvas 基础
首先，让我们回顾一下 Canvas 是什么以及如何在页面中创建一个 Canvas 元素。HTML5 中新增了 <canvas> 标签，用于在网页上绘制图形。通过 JavaScript 操作 Canvas 可以实现各种图形效果，包括动画、游戏等。
<canvas id="myCanvas"></canvas>
要在 JavaScript 中获取该元素并进行操作：
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");ctx 对象是 CanvasRenderingContext2D 类型的，提供了众多绘图方法，包括 fillRect()、strokeRect()、lineTo() 等。
创建星空背景
接下来，我们需要生成几百个随机位置和大小的星星。为了使视觉效果更丰富，我们可以让星星呈现不同的颜色和亮度。
-- -------------------- ---- -------
----- ---- -
------------- -
------ - ------------- - ---- - ----
------ - ------------- - ---- - ----
------ - ------------- - -----
--------- - ------------- - ----
---------- - -------------------- - -------------------- - -------------------- - ------
-
-
----- ----- - ---
--- ---- - - -- - - ---- ---- -
-------------- --------
-以上代码创建了一个 Star 类，每个实例都包含随机的 x、y、z 坐标和大小，以及随机的颜色。接下来我们需要将这些星星绘制到 Canvas 上。
-- -------------------- ---- -------
-------- ----------- -
--- ---- - - -- - - ------------- ---- -
----- ---- - ---------
----------------
------------- - -----------
----- - - ------ - ------ - ------------ - ------------ - --
----- - - ------ - ------ - ------------ - ------------- - --
---------- -- ---------- -- - - ---------
-----------
-
-以上代码遍历所有星星，根据每个星星的 x、y、z 坐标计算在 Canvas 上的位置，并绘制出来。
旋转效果
现在我们已经成功创建了一个静态的星空背景，但它还不够酷炫。我们希望能够让星空在屏幕上旋转。
-- -------------------- ---- -------
--- ----- - --
-------- ------------- -
----- -- -------
--- ---- - - -- - - ------------- ---- -
----- ---- - ---------
----- ------------ - -
----------------- ----------------- ---
----------------- ---------------- ---
--- -- --
--
----- ------ ----- ----- - ---------------------------------- -------- ------- ---------
------ - -----
------ - -----
------ - -----
-
-以上代码定义了一个 angle 变量来表示旋转的角度，并在每一帧中调用 rotateStars() 函数计算并更新每个星星的新位置。其中，使用了一个名为 multiplyMatrixVector() 的函数，它用于计算矩阵和向量的乘积。
function multiplyMatrixVector(matrix, vector) {
const result = [];
for (let i = 0; i < matrix.length; i++) {
let sum = 0;
for (let j = 0; j < vector.length
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/30835) ，转载请注明来源
[https://www.javascriptcn.com/post/30835](https://www.javascriptcn.com/post/30835)