三种canvas星空背景效果

作者：System 时间：2024年08月07日分类：所有,css3 字数：1602

以下是一个简单的HTML和JavaScript代码示例，用于创建一个带有星空背景的画布：




<!DOCTYPE html>
<html>
<head>
<style>
body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
canvas {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
}
</style>
</head>
<body>
<canvas id="starfield"></canvas>
 
<script>
function Starfield() {
  this.stars = [];
  this.width = window.innerWidth;
  this.height = window.innerHeight;
  this.maxStars = 1000; // 可根据需要调整星星数量
 
  this.init = function() {
    for (var i = 0; i < this.maxStars; i++) {
      this.stars.push({
        x: Math.random() * this.width,
        y: Math.random() * this.height,
        size: Math.random() * 2,
        speed: Math.random() * .05
      });
    }
  };
 
  this.render = function() {
    var canvas = document.getElementById('starfield');
    var ctx = canvas.getContext('2d');
 
    ctx.globalAlpha = 0.5; // 设置全局透明度
    ctx.fillRect(0, 0, this.width, this.height);
    ctx.globalAlpha = 1.0;
 
    for (var i = 0; i < this.maxStars; i++) {
      var star = this.stars[i];
      ctx.fillRect(star.x, star.y, star.size, star.size);
 
      star.x += Math.cos(i + this.width) * star.speed;
      star.y += Math.sin(i + this.height) * star.speed;
 
      if (star.x > this.width) {
        star.x = 0;
      }
      if (star.y > this.height) {
        star.y = 0;
      }
    }
  };
 
  this.init();
  setInterval(this.render.bind(this), 33); // 每33毫秒重绘一次
}
 
new Starfield();
</script>
</body>
</html>

这段代码创建了一个星场背景，其中包含了1000颗随机大小和速度的星星。星星会随机移动，如果移出画布边界，它们会重新出现在画布的另一侧。这个示例使用了setInterval来周期性地重绘画布，创建动态的星空效果。

三种canvas星空背景效果

评论已关闭

推荐阅读