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 相关文章推荐
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
jquery插件开发之实现jquery手风琴功能分享
Mar 10 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
Vue计算属性的使用
Aug 04 Javascript
javascript 日期相减-在线教程(附代码)
Aug 17 Javascript
JS判断数组那点事
Oct 10 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
vue组件详解之使用slot分发内容
Apr 09 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
vue+django实现下载文件的示例
Mar 24 Vue.js
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文件缓存内容保存格式实例分析
2014/08/20 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
PHP目录与文件操作技巧总结(创建,删除,遍历,读写,修改等)
2016/09/11 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
PHP搭建大文件切割分块上传功能示例
2017/01/04 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
Prototype RegExp对象 学习
2009/07/19 Javascript
由Javascript实现的页面日历
2011/11/04 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
2017/10/17 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
javascript对HTML字符转义与反转义
2018/12/13 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
Python logging模块学习笔记
2014/05/24 Python
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
python语言使用技巧分享
2016/05/31 Python
对python同一个文件夹里面不同.py文件的交叉引用方法详解
2018/12/15 Python
Django REST framework 分页的实现代码
2019/06/19 Python
pytorch 求网络模型参数实例
2019/12/30 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
大学生怎样进行自我评价
2013/12/07 职场文书
小学生开学感言
2014/02/28 职场文书
小学生常见病防治方案
2014/06/06 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
追悼会答谢词范文
2015/09/29 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL