canvas-流星

最新推荐文章于 2024-06-28 18:43:04 发布

Liszter

最新推荐文章于 2024-06-28 18:43:04 发布

阅读量225

点赞数

分类专栏：前端 JavaScript算法文章标签： javascript html html5

本文链接：https://blog.youkuaiyun.com/qq_39198394/article/details/120434409

版权

JavaScript算法同时被 2 个专栏收录

9 篇文章

订阅专栏

前端

5 篇文章

订阅专栏

本文介绍了一个使用HTML5 Canvas实现流星雨动画的技术方案。通过自定义流星类，文章详细阐述了如何生成随机位置、颜色和轨迹的流星，并展示了如何通过JavaScript控制流星的移动和消失效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>流星雨</title>
  <script>
    var context;
    var arr = new Array();
    var starCount = 800;
    var rains = new Array();
    var rainCount = 1;
    //初始化画布及context
    function init() {
      //获取canvas
      var stars = document.getElementById("stars");
      windowWidth = window.innerWidth; //当前的窗口的高度
      stars.width = windowWidth;
      stars.height = window.innerHeight;
      //获取context
      context = stars.getContext("2d");
    }
    //创建一个星星对象a
    var Star = function () {
      this.x = windowWidth * Math.random();//横坐标
      this.y = 5000 * Math.random();//纵坐标
      this.text = ".";//文本a
      this.color = "white";//颜色
      //产生随机颜色
      this.getColor = function () {
        var _r = Math.random();
        if (_r < 0.5) {
          this.color = "#333";
        } else {
          this.color = "white";
        }
      }
      //初始化
      this.init = function () {
        this.getColor();
      }
      //绘制
      this.draw = function () {
        context.fillStyle = this.color;
        context.fillText(this.text, this.x, this.y);
      }
    }
    //页面加载的时候
    window.onload = function () {
      init();
      //画星星
      for (var i = 0; i < starCount; i++) {
        var star = new Star();
        star.init();
        star.draw();
        arr.push(star);
      }
      //画流星
      for (var i = 0; i < rainCount; i++) {
        var rain = new MeteorRain();
        rain.init();
        rain.draw();
        rains.push(rain);
      }

    //   playStars();//绘制闪动的星星
      playRains();//绘制流星

    }
    //星星闪起来
    function playStars() {
      for (var n = 0; n < starCount; n++) {
        arr[n].getColor();
        arr[n].draw();
      }

      setTimeout("playStars()", 100);
    }

    /*流星雨开始*/
    var MeteorRain = function () {
      this.x = -1;
      this.y = -1;
      this.length = -1;//长度
      this.angle = 30; //倾斜角度
      this.width = -1;//宽度
      this.height = -1;//高度
      this.speed = 1;//速度
      this.offset_x = -1;//横轴移动偏移量
      this.offset_y = -1;//纵轴移动偏移量
      this.alpha = 1; //透明度
      this.color1 = "";//流星的色彩
      this.color2 = ""; //流星的色彩
      /****************初始化函数********************/
      this.init = function () //初始化
      {
        this.getPos();
        this.alpha = 1;//透明度
        this.getRandomColor();
        //最小长度，最大长度
        var x = Math.random() * 80 + 150;
        this.length = Math.ceil(x);
        //         x = Math.random()*10+30;
        this.angle = 30; //流星倾斜角
        x = Math.random() + 0.5;
        this.speed = Math.ceil(x); //流星的速度
        var cos = Math.cos(this.angle * 3.14 / 180);
        var sin = Math.sin(this.angle * 3.14 / 180);
        this.width = this.length * cos; //流星所占宽度
        this.height = this.length * sin;//流星所占高度
        this.offset_x = this.speed * cos;
        this.offset_y = this.speed * sin;
      }
      /**************获取随机颜色函数*****************/
      this.getRandomColor = function () {
        var a = Math.ceil(255 - 240 * Math.random());
        //中段颜色
        this.color1 = "rgba(" + a + "," + a + "," + a + ",1)";
        //结束颜色
        this.color2 = "#090723";
      }
      /***************重新计算流星坐标的函数******************/
      this.countPos = function ()//
      {
        //往左下移动,x减少，y增加
        this.x = this.x - this.offset_x;
        this.y = this.y + this.offset_y;
      }
      /*****************获取随机坐标的函数*****************/
      this.getPos = function () //
      {
        //横坐标200--1200
        this.x = Math.random() * window.innerWidth; //窗口高度
        //纵坐标小于600
        this.y = Math.random() * window.innerHeight; //窗口宽度
      }
      /****绘制流星***************************/
      this.draw = function () //绘制一个流星的函数
      {
        context.save();
        context.beginPath();
        context.lineWidth = 1; //宽度
        context.globalAlpha = this.alpha; //设置透明度
        //创建横向渐变颜色,起点坐标至终点坐标
        var line = context.createLinearGradient(this.x, this.y,
          this.x + this.width,
          this.y - this.height);
        //分段设置颜色
        line.addColorStop(0, "white");
        line.addColorStop(0.3, this.color1);
        line.addColorStop(0.6, this.color2);
        context.strokeStyle = line;
        //起点
        context.moveTo(this.x, this.y);
        //终点
        context.lineTo(this.x + this.width, this.y - this.height);
        context.closePath();
        context.stroke();
        context.restore();
      }
      this.move = function () {
        //清空流星像素
        var x = this.x + this.width - this.offset_x;
        var y = this.y - this.height;
        context.clearRect(x - 3, y - 3, this.offset_x + 5, this.offset_y + 5);
        //         context.strokeStyle="red";
        //         context.strokeRect(x,y-1,this.offset_x+1,this.offset_y+1);
        //重新计算位置，往左下移动
        this.countPos();
        //透明度增加
        this.alpha -= 0.002;
        //重绘
        this.draw();
      }
    }
    //绘制流星
    function playRains() {

      for (var n = 0; n < rainCount; n++) {
        var rain = rains[n];
        rain.move();//移动
        if (rain.y > window.innerHeight) {//超出界限后重来
          context.clearRect(rain.x, rain.y - rain.height, rain.width, rain.height);
          rains[n] = new MeteorRain();
          rains[n].init();
        }
      }
      setTimeout("playRains()", 2);
    }
 /*流星雨结束*/
  </script>
  <style type="text/css">
    body {
      background-color: #090723;
    }
    
    body,
    html {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <canvas id="stars"></canvas>
</body>

</html>

自己改一下 - --- 封装流星类用着方便些

流星类

 export class ShootStar {
   x = -1 // 初始坐标
   y = -1
   length = -1 // 流星长度
   angle = 30 // 倾斜角度
   width = -1 // 流星所在区域范围
   height = -1
   speed = 1 // 速度
   offset_x = -1 // 移动偏移量
   offset_y = -1
   alpha = 1 // 透明度
   color = [] // 星轨颜色

   // 获取随机坐标的函数
   getPosition(w, h) {
     this.x = Math.random() * w;
     this.y = Math.random() * h;
   }

   // 获取随机颜色
   getRandomColor() {
     this.color = []
     let a = Math.ceil(255 - 240 * Math.random());
     // 中段颜色
     this.color.push("rgba(" + a + "," + a + "," + a + ",1)")
     //结束颜色
     this.color.push("rgba(99, 99, 99, .1)")
   }

   // 流星本体透明度  -- 不小于 0.5
   getRandomAlpha() {
     this.alpha = Math.random() * 0.5 + 0.5
   }

   // 流星长度
   getRandomLength() {
     this.length = Math.random() * 80 + 150
   }

   // 设定 移动的速度
   getRandomSpeed() {
     this.speed = Math.ceil(this.length = Math.random() * 80 + 150) / 40
   }

   // 流星当前所占窗体的位置
   getWindowSize() {
     this.width = this.length * Math.cos(this.angle * 3.14 / 180)
     this.height = this.length * Math.sin(this.angle * 3.14 / 180)
   }

   // 流星 运动 xy 的速度
   getDirectionSpeed() {
     this.offset_x = this.speed * Math.cos(this.angle * 3.14 / 180)
     this.offset_y = this.speed * Math.sin(this.angle * 3.14 / 180)
   }
   // 重新计算 流星的位置

   getNewPosition() {
     this.x = this.x - this.offset_x
     this.y = this.y + this.offset_y
   }

   // 初始化一个 流星属性
   getInit(w, h) {
     this.getPosition(w, h)
     this.getRandomColor()
     this.getRandomAlpha()
     this.getRandomLength()

     this.getRandomSpeed()
     this.getWindowSize()
     this.getDirectionSpeed()

   }
 }