canvas实现流星雨的背景效果


Posted in Javascript onJanuary 13, 2017

看到一个很棒的流星雨效果。修改一下样式就可以作为网页背景了。。!

<!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 =20;
      //初始化画布及context
      function init(){
        //获取canvas
        var stars = document.getElementById("stars");
        windowWidth = window.innerWidth; //当前的窗口的高度
        stars.width=windowWidth;
  stars.height=window.innerHeight;
        //获取context
        context = stars.getContext("2d");
      }
      //创建一个星星对象
      var Star = function (){
        this.x = windowWidth * Math.random();//横坐标
        this.y = 5000 * Math.random();//纵坐标
        this.text=".";//文本
        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);
        }
      }
       //画月亮
      function drawMoon(){
         var moon = new Image();
           moon.src = "./images/moon.jpg"
           context.drawImage(moon,-5,-10);
      }
      //页面加载的时候
      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);
  }
        drawMoon();//绘制月亮
        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 = "black";
  }
   /***************重新计算流星坐标的函数******************/
  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: black;
      }
  body,html{width:100%;height:100%;overflow:hidden;}
    </style>
  </head>
  <body>
    <canvas id="stars"></canvas>
  </body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
更正确的asp冒泡排序
May 24 Javascript
JavaScript 设计模式学习 Factory
Jul 29 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
AngularJS上拉加载问题解决方法
May 23 Javascript
基于gulp合并压缩Seajs模块的方式说明
Jun 14 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
Javascript实现鼠标移入方向感知
Jun 24 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 #Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 #Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 #Javascript
bootstrap网格系统使用方法解析
Jan 13 #Javascript
js 判断数据类型的几种方法
Jan 13 #Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 #Javascript
BootStrap表单验证实例代码
Jan 13 #Javascript
You might like
PHP strtok()函数的优点分析
2010/03/02 PHP
PHP写的求多项式导数的函数代码
2012/07/04 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
JavaScript中文件上传API详解
2016/04/01 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
python在指定目录下查找gif文件的方法
2015/05/04 Python
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
python爬取网页转换为PDF文件
2018/06/07 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
python在不同条件下的输入与输出
2020/02/13 Python
python下载的库包存放路径
2020/07/27 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
荷兰男士时尚网上商店:Suitable
2017/12/25 全球购物
学校办公室主任职责
2013/12/27 职场文书
公司会议策划方案
2014/05/17 职场文书
低碳环保演讲稿
2014/08/28 职场文书
迎国庆横幅标语
2014/10/08 职场文书
教师学期个人总结
2015/02/11 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
高中化学教学反思
2016/02/22 职场文书
MySQL池化框架学习接池自定义
2022/07/23 MySQL