JS实现动态星空背景 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


JS实现动态星空背景

2019-10-28 释然 前端及开发文章及欣赏



这里我截取的是一个图片,实际上是会动的。废话不多说,上代码。
HTML:

<canvas id="canvas"></canvas>
1
CSS:

/*css reset */
body,p,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,iframe,nav {
    margin: 0;
    padding: 0;
}
html,body {
    width: 100%;
    height: 100%;
}
body {
    font: 14px Microsoft YaHei;
    -webkit-text-size-adjust:100%;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
    background: #000;
}

#canvas {
    width: 100%;
    height: 100%;
    display: block;
    opacity: .8;
}


// 音量大小,0.01-1


//宇宙特效
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
w = canvas.width = window.innerWidth,
h = canvas.height = window.innerHeight,

hue = 217,
stars = [],
count = 0,
maxStars = 1100;                //星星数量,默认1300
var canvas2 = document.createElement('canvas'),
ctx2 = canvas2.getContext('2d');
canvas2.width = 100;
canvas2.height = 100;
var half = canvas2.width / 2,
gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#CCC');
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');

ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();

// End cache
function random(min, max) {
    if (arguments.length < 2) {
        max = min;
        min = 0;
    }

    if (min > max) {
        var hold = max;
        max = min;
        min = hold;
    }

    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function maxOrbit(x, y) {
    var max = Math.max(x, y),
    diameter = Math.round(Math.sqrt(max * max + max * max));
    return diameter / 2;
    //星星移动范围,值越大范围越小,
}

var Star = function() {

    this.orbitRadius = random(maxOrbit(w, h));
    this.radius = random(60, this.orbitRadius) / 10;       //星星大小,值越大星星越小,默认8
    
    this.orbitX = w / 2;
    this.orbitY = h / 2;
    this.timePassed = random(0, maxStars);
    this.speed = random(this.orbitRadius) / 80000;        //星星移动速度,值越大越慢,默认5W
    
    this.alpha = random(2, 10) / 10;

    count++;
    stars[count] = this;
}

Star.prototype.draw = function() {
    var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
    y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
    twinkle = random(10);

    if (twinkle === 1 && this.alpha > 0) {
        this.alpha -= 0.05;
    } else if (twinkle === 2 && this.alpha < 1) {
        this.alpha += 0.05;
    }

    ctx.globalAlpha = this.alpha;
    ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
    this.timePassed += this.speed;
}

for (var i = 0; i < maxStars; i++) {
    new Star();
}

function animation() {
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 0.5;                                 //尾巴
    ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 2)';
    ctx.fillRect(0, 0, w, h)

    ctx.globalCompositeOperation = 'lighter';
    for (var i = 1,
    l = stars.length; i < l; i++) {
        stars[i].draw();
    };

    window.requestAnimationFrame(animation);
}

animation();
蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务。
标签: JS实现动态星空背景 « 重磅发布!天猫双十一品牌设计背后的故事 | 破熵而行-驱动产品增长»


蓝蓝 http://www.bjhbys.com

  1. 2019年10月(53)
  2. 2019年9月(48)
  3. 2019年8月(63)
  4. 2019年7月(59)
  5. 2019年6月(59)
  6. 2019年5月(31)
  7. 2019年4月(37)
  8. 2019年3月(43)
  9. 2019年2月(26)
  10. 2019年1月(45)
  11. 2018年12月(41)
  12. 2018年11月(40)
  13. 2018年10月(29)
  14. 2018年9月(40)
  15. 2018年8月(87)
  16. 2018年7月(107)
  17. 2018年6月(86)
  18. 2018年5月(110)
  19. 2018年4月(40)
  20. 2018年3月(35)
  21. 2017年8月(35)
  22. 2017年7月(45)
  23. 2017年6月(7)
  24. 2017年5月(27)
  25. 2017年4月(51)
  26. 2017年3月(70)
  27. 帝皇彩票官网2017年2月(65)
  28. 2017年1月(69)
  29. 2016年12月(55)
  30. 2016年11月(111)
  31. 2016年10月(92)
  32. 2016年9月(53)
  33. 2016年8月(9)
  34. 2016年7月(4)
  35. 2016年6月(9)
  36. 2016年3月(19)
  37. 2016年2月(26)
  38. 帝皇彩票官网2016年1月(30)
  39. 2015年12月(33)
  40. 2015年11月(35)
  41. 2015年10月(46)
  42. 2015年9月(43)
  43. 2015年8月(40)
  44. 帝皇彩票官网2015年7月(33)
  45. 2015年6月(46)
  46. 2015年5月(58)
  47. 2015年4月(70)
  48. 2015年3月(55)
  49. 2015年2月(17)
  50. 2015年1月(33)
  51. 2014年12月(21)
  52. 帝皇彩票官网2014年11月(84)
  53. 2014年10月(94)
  54. 2014年9月(6)
  55. 2014年8月(1)
  56. 2014年7月(13)
  57. 2014年6月(66)
  58. 2014年5月(99)
  59. 2014年4月(88)
  60. 2014年3月(102)
  61. 2014年2月(68)
  62. 2014年1月(83)
  63. 2013年12月(106)
  64. 2013年11月(112)
  65. 2013年10月(61)
  66. 帝皇彩票官网2013年9月(20)
  67. 2013年7月(13)
  68. 2013年6月(27)
  69. 2013年5月(48)
  70. 2013年4月(39)
  71. 2013年3月(8)
  72. 2013年2月(20)
  73. 2013年1月(31)
  74. 2012年12月(33)
  75. 2012年11月(31)
  76. 2012年10月(23)
  77. 2012年9月(8)
  78. 2012年7月(14)
  79. 2012年6月(15)
  80. 2012年5月(31)
  81. 2012年4月(24)
  82. 2012年2月(4)
  83. 2012年1月(8)
  84. 2011年12月(35)
  85. 2011年11月(32)
  86. 2011年10月(13)
  87. 2011年8月(1)
  88. 2011年6月(1)
订阅Rss
桔子彩票官网 状元彩票开奖 状元彩票平台 上海11选5分布走势图 博发彩票登陆 吉利彩票开奖 内蒙古快三走势图 欢乐斗牛 迪士尼彩乐园 帝皇彩票官网