JS实现动态星空背景效果


Posted in Javascript onNovember 01, 2019

本文实例为大家分享了JS实现动态星空背景的具体代码,供大家参考,具体内容如下

 JS实现动态星空背景效果

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

HTML:

<canvas id="canvas"></canvas>

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;
}

JS:

// 音量大小,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();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
jQuery中delegate()方法用法实例
Jan 19 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
js仿淘宝和百度文库的评分功能
May 15 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
基于Vue生产环境部署详解
Sep 15 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
React 实现车牌键盘的示例代码
Dec 20 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 #jQuery
vue 中固定导航栏的实例代码
Nov 01 #Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 #Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 #Javascript
Vue实现导航栏的显示开关控制
Nov 01 #Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 #Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 #Javascript
You might like
让你的网站首页自动选择语言转跳
2006/12/06 PHP
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
php创建session的方法实例详解
2015/01/27 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
jquery 按钮状态效果 正常、移上、按下
2013/08/12 Javascript
jquery trigger实现联动的方法
2016/02/29 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
2018/02/07 Javascript
JavaScript模板引擎原理与用法详解
2018/12/24 Javascript
微信小程序之几种常见的弹框提示信息实现详解
2019/07/11 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
WEB前端性能优化的7大手段详解
2020/02/04 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
python多线程操作实例
2014/11/21 Python
python利用datetime模块计算时间差
2015/08/04 Python
使用python 3实现发送邮件功能
2018/06/15 Python
对python 自定义协议的方法详解
2019/02/13 Python
解决Python中定时任务线程无法自动退出的问题
2019/02/18 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
单身联谊活动方案
2014/01/29 职场文书
文明风采获奖感言
2014/02/18 职场文书
关于保护环境的建议书
2014/05/13 职场文书
校园环保建议书
2014/05/14 职场文书
研修心得体会
2014/09/04 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
自我推荐信怎么写
2015/03/24 职场文书
Spring Data JPA使用JPQL与原生SQL进行查询的操作
2021/06/15 Java/Android
python3 字符串str和bytes相互转换
2022/03/23 Python
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers