JS+canvas画布实现炫酷的旋转星空效果示例

下面就是详细讲解“JS+canvas画布实现炫酷的旋转星空效果示例”的完整攻略。

1. 准备工作

首先，在HTML文件头部添加canvas标签，设置canvas的宽高，以及id和class属性。代码示例如下：

<canvas id="myCanvas" class="canvas" width="800" height="600"></canvas>

然后，在JS文件中获取canvas元素，并获取其上下文对象ctx。代码示例如下：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

2. 绘制背景

我们需要使用canvas绘制背景，首先需要使用canvas的createLinearGradient()方法创建一个渐变对象，用于将背景从上到下渐变。代码示例如下：

const skyGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
skyGradient.addColorStop(0, '#060A1E');
skyGradient.addColorStop(1, '#17062A');
ctx.fillStyle = skyGradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

上述代码中，我们使用了ctx.fillStyle属性来设置背景的填充颜色，填充颜色使用了渐变对象skyGradient。

3. 绘制星空

现在，我们需要绘制星空效果。我们可以使用一个数组来存储多个星星对象，每个星星对象包括星星的坐标、位置、速度和半径等属性。我们可以使用循环遍历数组，对每个星星进行绘制。代码示例如下：

class Star {
  constructor() {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.px = this.x;
    this.py = this.y;
    this.vel = Math.random() * 0.2;
    this.radius = Math.random() * 3;
  }
  update() {
    this.px = this.x;
    this.py = this.y;
    this.x += this.vel * (mouse.x - this.x);
    this.y += this.vel * (mouse.y - this.y);
  }
  draw() {
    ctx.beginPath();
    ctx.fillStyle = 'white';
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
    ctx.fill();
    ctx.closePath();
  }
}

const stars = [];

for (let i = 0; i < 200; i++) {
  stars.push(new Star());
}

function drawStars() {
  for (let i = 0; i < 200; i++) {
    stars[i].update();
    stars[i].draw();
  }
}

上述代码中，我们首先定义了一个Star类，用于创建星星对象。在循环中，我们创建了200个星星对象，并将其存储在stars数组中。我们还需要添加update()方法，用于更新星星的位置，并添加draw()方法，用于绘制星星。最后，我们定义了一个drawStars()方法，用于遍历stars数组并对每个星星进行更新和绘制。

4. 绘制动画

通过上述步骤，我们实现了背景和星空的绘制效果。但是，我们需要将它们转换为动画效果，即使星星在画布上移动。

在每一帧之前，我们需要清除画布并绘制背景。然后，我们调用drawStars()方法，对星星进行更新和绘制。代码示例如下：

function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = skyGradient;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  drawStars();
}

上述代码中，我们使用了requestAnimationFrame()方法来创建动画，该方法将自动创建帧并调用animate()方法。在animate()方法中，我们首先使用clearRect()方法清除画布，然后绘制背景，并调用drawStars()方法进行星星的更新和绘制。

5. 添加交互效果

我们可以通过添加交互效果来使星星更加动态。我们可以使用鼠标位置与星星的距离来确定星星的移动速度。我们在Star类中的update()方法中添加了以下代码：

this.x += this.vel * (mouse.x - this.x);
this.y += this.vel * (mouse.y - this.y);

上述代码中，我们使用了鼠标的x和y坐标与星星的x和y坐标之间的距离，通过一个速度系数来计算星星在每一帧中的移动距离。

示例说明

代码示例中，我们实现了两个示例：

• 示例1：炫酷的旋转星空效果。

• 示例2：加入交互后的星空效果。

示例1中，我们使用了一个背景渐变对象skyGradient，并绘制了200个随机半径和位置的星星，利用鼠标位置与星星的距离来确定星星的移动速度和移动方向，并且运用数学知识和线性代数，给画面增添了旋转效果，使得画面更加炫酷。示例2在示例1的基础上，加入了交互效果，当鼠标移动时，星星随之移动，产生更真实的感受。

以上就是“JS+canvas画布实现炫酷的旋转星空效果示例”的完整攻略。