原生js实现星星闪烁效果

下面是“原生js实现星星闪烁效果”的完整攻略。

1. 实现思路

星星的闪烁效果可以通过控制星星的透明度来实现。具体来说，我们可以通过逐渐改变星星的透明度让星星出现或消失，从而达到闪烁的效果。

2. 实现步骤

2.1 创建星星

首先，我们需要先创建星星的元素，可以使用canvas或者div来实现。

2.2 实现闪烁效果

为了实现闪烁效果，我们需要按照一定的时间间隔执行透明度的变化。可以使用setInterval或者requestAnimationFrame来实现。

在变化透明度的时候，我们可以采用以下的思路：

1. 如果透明度小于等于0，则将透明度设为1；
2. 如果透明度大于等于1，则将透明度设为0；
3. 否则，透明度在[0,1]之间来回变化。

通过上述方式，我们就可以实现星星的闪烁效果。

3. 示例说明

3.1 示例1：创建div元素实现星星闪烁效果

在下面的示例中，我们使用div元素来创建星星，并且通过控制透明度来实现闪烁效果。

<div class="star"></div>

.star {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0;
}

const star = document.querySelector('.star');
let opacity = 0;

setInterval(() => {
  opacity += 0.01;
  if (opacity >= 1) opacity = 0;
  star.style.opacity = opacity;
}, 10);

3.2 示例2：创建canvas元素实现星星闪烁效果

在下面的示例中，我们使用canvas元素来创建星星，并且通过控制透明度来实现闪烁效果。

<canvas id="star"></canvas>

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

const canvas = document.querySelector('#star');
const ctx = canvas.getContext('2d');
let opacity = 0;

function drawStar() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#fff';
  ctx.beginPath();
  ctx.arc(50, 50, 5, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.fill();
}

setInterval(() => {
  opacity += 0.01;
  if (opacity >= 1) opacity = 0;
  ctx.globalAlpha = opacity;
  drawStar();
}, 10);

4. 结语

通过上述示例，我们可以发现，原生js实现星星闪烁效果并不难，只需要控制透明度即可。如果你有更好的实现方式，欢迎留言讨论。