canvas绘制星空

最新推荐文章于 2024-09-16 08:47:17 发布

Billow_lamb

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量392

点赞数 6

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/billow_lamb/article/details/136204745

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document </title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    #canvas {
      background: #473856;
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <script>
    var canvas = document.getElementById("canvas");
    let WIDTH = canvas.width = document.documentElement.clientWidth - 0;
    let HEIGHT = canvas.height = document.documentElement.clientHeight - 4;
    var context = canvas.getContext("2d");
    // context.fillStyle = "#473856";
    // context.fillRect(0, 0,  canvas.width, canvas.height);

    let initRoundPopulation  = 200;

    let roudm = [];

    function drawStar(x, y, radius, points, angle) {
      this.x = x;
      this.y = y;
      this.radius = radius;
      this.points = points;
      this.angle = angle;

    }
    drawStar.prototype.draw = function() {
      context.fillStyle = "white";
      context.beginPath();
      context.arc(this.x, this.y, this.radius, this.points, this.angle);
      context.fill();
    }
    drawStar.prototype.update = function() {
      this.y -= 0.5;
      // console.log(this.y );
      if(this.y < 0){
        this.y =  Math.random() * HEIGHT, Math.random() * 2 + 1
      }
      this.draw();
    }

    function init(){
       for(let i = 0; i < initRoundPopulation; i++){
        roudm[i] = new drawStar(Math.random() * WIDTH, Math.random() * HEIGHT, Math.random() * 2 + 1, 0, 2 * Math.PI, false);
        roudm[i].draw();
      }
    }
    init();
    animate();
    function animate(){
      context.clearRect(0, 0,  WIDTH, HEIGHT);
      for (const start of roudm) {
        start.update();
      }
      requestAnimationFrame(animate);
    }

  </script>
</body>

</html>