canvas实现流星雨的背景效果

2024-09-27 22:07:11

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

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

js面向对象实现canvas制作彩虹球喷枪效果

前段时间在研究canvas,感觉还挺好玩的,就写了一个小demo,效果如下: 第一次尝试用js面向对象的方式来写,经验不足,还请大家多多包涵. 下面开始简单介绍代码: canvas画布: 复制代码代码如下: <canvas id='canvas' width='1050' height='500' style='background:#333;overflow: hidden;'></canvas> 彩虹球的随机颜色是通过下面两个方法来实现的,在<js常用方法和一些封装(2
JS+Canvas 实现下雨下雪效果

最近做了一个项目,其中有需求要实现下雨小雪的动画特效,所以在此做了个drop组件,来展现这种canvas常见的下落物体效果.在没给大家介绍正文之前,先给大家展示下效果图: 展示效果图: 下雨下雪看起来效果还是不错的,相对于使用创建dom元素来制作多物体位移动画, 使用canvas会更加容易快捷,以及性能会更好调用代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U
canvas实现爱心和彩虹雨效果

效果图: 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <canvas id="canvas"></canvas> <script> var canvas = document.getElementByI
canvas实现流星雨的背景效果

看到一个很棒的流星雨效果.修改一下样式就可以作为网页背景了..! <!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
JavaScript利用canvas绘制流星雨效果

目录前言需求分析实现过程 1.绘制满天繁星 2.满天繁星闪起来 3.绘制流星 4.流星划过夜空 5.流星雨 6.merge视觉盛宴前言最近总是梦见一些小时候的故事,印象最深刻的就是夏天坐在屋顶上,看着满天的繁星,一颗,两颗,三颗...不由自主地开始了数星星的过程.不经意间,一颗流星划过夜间,虽然只是转瞬即逝,但它似乎比夜空中的其它繁星更吸引着我.听老人说,看见流星的时候许愿,愿望是可以实现的,此时早已把数星星抛之脑后,开始期待着下一颗流星的出现.但是那天晚上,流星再也没有出现,这也成了
canvas简单快速的实现知乎登录页背景效果

前言打开知乎的登录页,就可以看到其背景有一个动效,看起来好像蛮不错的样子: 这个效果使用canvas是不难实现的,接下来就一步一步地讲解并实现这个效果. 分析在动工之前先分析这个效果到底是如何运动的.首先要理解的是虽然看起来好像所有线和圆都在运动,但实际上只有圆才是在运动的,而线只不过是把满足一定条件的任意两个圆连接在一起.那么接下来就分析圆是怎么运动的,从效果看,每个圆都是在做匀速直线运动,而且运动方向不一,通过物理相关知识可以得知,每一个圆在水平方向和垂直方向都有一个速度.最后是当圆运动
javascript实现起伏的水波背景效果

本文实例为大家分享了js水波背景效果的实现代码,供大家参考,具体内容如下效果图: 实现代码: <!DOCTYPE html> <html> <head> <title>水波背景</title> <meta charset="gb2312" /> <style> html, body {width:100%; height:100%; padding:0; margin:0;} </style&g
基于Particles.js制作超炫粒子动态背景效果(仿知乎)

好久没登录知乎,发现他们的登录页面粒子动态效果蛮炫的,查一下代码用了Particles.js基于Canvas画布创建粒子颗粒效果. 上图上图: 感觉有比格,就照着弄了一个,玩玩. github: https://github.com/VincentGarreau/particles.js/ 操作过程: 网上有基本流程,可以参考一下,不过直接用在登录页面会有小bug,需要调整下. 1.首先在页面中引入particles.js文件. <script src="js/particles.js
Android选中突出背景效果的底部导航栏功能

今天在群里看到一个底部导航选中突出效果像这样就想着这个应该怎么做呢,我记得类似咸鱼那种的是中间突出,不像这种是选中哪个,哪个就突出第一种方法简单快捷,让UI帮忙切几张带突出背景的图片, 选中切换图片简单粗暴在群里找小伙伴要了UI的切图一看给的6张图片一样大小,也不带突出背景于是想着有没有第二种方法实现百度了许久也许是我找的方法不对,也许是大家都没遇到这样的UI. 怎么办,自己想想,静下心来看UI效果,发现突出的地方有点像贝塞尔曲线再细细分析一下,如果突出的是贝塞尔曲线那么如何画
JS画布动态实现黑客帝国背景效果

本文实例为大家分享了JS画布动态实现黑客帝国背景效果的具体代码,供大家参考,具体内容如下效果图完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
分享JS四种好玩的黑客背景效果代码

目录示例一示例二示例三示例四示例一 <html> <head> <title>The Matrix</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <meta charset="
JavaScript实现流星雨效果的示例代码

目录演示技术栈源码首先建立星星对象让星星闪亮起来创建流星雨对象让流星动起来演示上一次做了一个雨滴的动画,顺着这种思维正好可以改成流星雨,嘿嘿我真是一个小机灵. 技术栈还是先建立画布 <body> <canvas id="stars"></canvas> </body> 画布标签我昨天讲过了.不知道的小伙伴可以去看看. 源码首先建立星星对象 //创建一个星星对象 var Star = function (){ this
JavaScript利用Canvas实现粒子动画倒计时

目录 canvas 粒子动画介绍何为canvas 粒子动画是啥 canvas 定义初始变量初始化canvas和数字文本创建一定数量的点倒计时倒计时文本绘画循环绘制点动画效果图 canvas 粒子动画介绍何为canvas canvas是HTML5中新增的一个标签,主要是用于网页实时生成图像并可操作图像,它是用JavaScript操作的bitmap. 粒子动画是啥粒子动画就是页面上通过发射许多微小粒子来表示不规则模糊物体,比如:用小圆点来模拟下雪.下雨的效果,用模糊线条模拟黑客帝

canvas实现流星雨的背景效果

相关推荐

随机推荐