canvas 星空特效

2020-03-01 09:10:11 阅读：306 来源： 互联网

标签：function 特效 canvas 星空 random context var speed Math

阿里云图标首页背景–星空特效

效果

代码

<html>
<canvas id="_bgcanvas" style="position: fixed;z-index:-1"></canvas>
<script>

/**
 * 
 * @param {string} element  canvas 元素  
 * @param {int} width    宽
 * @param {int} height  高
 */
function xingkong (element, width, height) {
  
  var canvas = document.querySelector(element);
  var w = width ||document.documentElement.clientWidth;
  var h = height || document.documentElement.clientHeight;
  canvas.width = w, canvas.height = h;
  var context = canvas.getContext("2d");

  // 背景
  context.fillStyle = "#090723";
  context.fillRect(0, 0, w, h);

  for (var l = [], r = 0; r < h; r += 4){
    l.push(new t({ x: Math.random() * w, y: Math.random() * h }));
  }
  l.push(new e);
  l.push(new e);
  function run () {
    context.fillStyle = "#090723",
    context.fillRect(0, 0, w, h);
    var n = "rgba(255, 255, 255, 0.5)";
    context.fillStyle = n;
    context.strokeStyle = n;
    for (var t = l.length; t--;) {
      l[t].update();
      
    }
    window.requestAnimationFrame(run)
  }
  
  run()

  // 星星
  function t (c) {

    this.size = 2 * Math.random();
    this.speed = .07 * Math.random();
    this.x = c.x;
    this.y = c.y

    // 
    this.reset = function () {
      this.size = 2 * Math.random();
      this.speed = .05 * Math.random();
      this.x = w;
      this.y = Math.random() * h;
    } 

    this.update = function  ()
    { 
      this.x -= this.speed, this.x < 0 ? this.reset() : context.fillRect(this.x, this.y, this.size, this.size)
    }
  }
  
  // 流星
  function e () {
    this.reset = function  () {
      this.x = Math.random() * w;
      this.y = 0;
      this.len = 80 * Math.random() + 10;
      this.speed = 8 * Math.random() + 4;
      this.size = +Math.random() + .1;
      this.waitTime = (new Date).getTime() + 3e3 * Math.random() + 500, this.active = !1
    }

    this.update = function ()
    {
      if(this.active == undefined)
        this.reset()
      this.active ?
        (this.x -= this.speed,
          this.y += this.speed,
          this.x < 0 || this.y >= height ? this.reset() : (context.lineWidth = this.size, context.beginPath(),
          context.moveTo(this.x, this.y),
          context.lineTo(this.x + this.len, this.y - this.len), context.stroke()))
        : this.waitTime < (new Date).getTime() && (this.active = !0)
    }
    
  }

}

// 使用
new xingkong("#_bgcanvas")
</script>
</html>

hobtdto 发布了2 篇原创文章 · 获赞 1 · 访问量 1329 私信关注

标签：function,特效,canvas,星空,random,context,var,speed,Math
来源： https://blog.csdn.net/hobtdto/article/details/104586652

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

canvas 星空特效