canvas星空背景

凉风听雪

于 2024-07-24 11:49:07 发布

阅读量170

点赞数 5

分类专栏：前端开发文章标签： javascript 开发语言 ecmascript canvas css 网站开发

本文链接：https://blog.csdn.net/p_s_p/article/details/140658699

版权

前端开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

单星空显示：

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Starry Sky</title>  
<style>  
  body, html {  
    margin: 0;  
    padding: 0;  
    width: 100%;  
    height: 100%;  
    overflow: hidden;  
  }  
  canvas {  
    display: block;  
    background: #000;  
  }  
</style>  
</head>  
<body>  
<canvas id="starCanvas"></canvas>  
<script>
const canvas = document.getElementById('starCanvas');  
const ctx = canvas.getContext('2d');  
  
canvas.width = window.innerWidth;  
canvas.height = window.innerHeight;  
  
class Star {  
  constructor(x, y, size, speed) {  
    this.x = x;  
    this.y = y;  
    this.size = size;  
    this.speed = speed; // 注意：这里的speed现在是像素/秒，用于控制星星横向移动的速度  
  }  
  
  draw() {  
    ctx.beginPath();  
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);  
    ctx.fillStyle = 'white';  
    ctx.fill();  
    ctx.closePath();  
  }  
  
  move() {  
    this.x += this.speed; // 更新x坐标以向右移动  
    if (this.x > canvas.width + this.size) { // 当星星完全移出右侧时  
      this.x = -this.size; // 从左侧重新开始  
    }  
  }  
}
  
const stars = [];  
  
function createStars(count) {  
  for (let i = 0; i < count; i++) {  
    const size = Math.random() * 3 + 1; // 星星大小在1到4之间  
    const speed = Math.random() * 2 + 0.5; // 星星速度在0.5到2.5之间  
    const x = Math.random() * canvas.width;  
    const y = Math.random() * canvas.height;  
    stars.push(new Star(x, y, size, speed));  
  }  
}  
  
function animate() {  
  ctx.clearRect(0, 0, canvas.width, canvas.height);  
  stars.forEach(star => {  
    star.draw();  
    star.move();  
  });  
  requestAnimationFrame(animate);  
}  
  
createStars(500); // 创建500颗星星  
animate();  
  
// 监听窗口大小变化，重新设置canvas大小并重新创建星星  
window.addEventListener('resize', () => {  
  canvas.width = window.innerWidth;  
  canvas.height = window.innerHeight;  
  stars.length = 0; // 清空旧星星  
  createStars(500); // 重新创建星星  
});</script>  
</body>  
</html>

效果预览：（是横向移动的）

作为页面背景显示：

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Solid Template</title>
    <link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600" rel="stylesheet">
    <link rel="stylesheet" href="dist/css/style.css">
	<script src="https://unpkg.com/animejs@3.0.1/lib/anime.min.js"></script>
    <script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
</head>

<style>  
    body, html {  
      margin: 0;  
      padding: 0;  
      width: 100%;  
      height: 100%;  
      /* overflow: hidden;   */
    }  
    canvas {  
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* z-index: -1; 确保 canvas 在背景 */
    }  
  </style>  

  <body class="is-boxed has-animations">
    
    <canvas id="starCanvas"></canvas>  
    <script>
        const canvas = document.getElementById('starCanvas');  
        const ctx = canvas.getContext('2d');  
          
        canvas.width = window.innerWidth;  
        canvas.height = window.innerHeight;  
          
        class Star {  
          constructor(x, y, size, speed) {  
            this.x = x;  
            this.y = y;  
            this.size = size;  
            this.speed = speed; // 注意：这里的speed现在是像素/秒，用于控制星星横向移动的速度  
          }  
          
          draw() {  
            ctx.beginPath();  
            ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);  
            ctx.fillStyle = 'white';  
            ctx.fill();  
            ctx.closePath();  
          }  
          
          move() {  
            this.x += this.speed; // 更新x坐标以向右移动  
            if (this.x > canvas.width + this.size) { // 当星星完全移出右侧时  
              this.x = -this.size; // 从左侧重新开始  
            }  
          }  
        }
          
        const stars = [];  
          
        function createStars(count) {  
          for (let i = 0; i < count; i++) {  
            const size = Math.random() * 3 + 1; // 星星大小在1到4之间  
            const speed = Math.random() * 2 + 0.5; // 星星速度在0.5到2.5之间  
            const x = Math.random() * canvas.width;  
            const y = Math.random() * canvas.height;  
            stars.push(new Star(x, y, size, speed));  
          }  
        }  
          
        function animate() {  
          ctx.clearRect(0, 0, canvas.width, canvas.height);  
          stars.forEach(star => {  
            star.draw();  
            star.move();  
          });  
          requestAnimationFrame(animate);  
        }  
          
        createStars(500); // 创建500颗星星  
        animate();  
          
        // 监听窗口大小变化，重新设置canvas大小并重新创建星星  
        window.addEventListener('resize', () => {  
          canvas.width = window.innerWidth;  
          canvas.height = window.innerHeight;  
          stars.length = 0; // 清空旧星星  
          createStars(500); // 重新创建星星  
        });
    </script>  

    <div class="main">
        页面内容
    </div>
  </body>
</html>