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 相关文章推荐
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
JQuery循环滚动图片代码
Dec 08 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
JavaScript函数使用的基本教程
Jun 04 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
手机软键盘弹出时影响布局的解决方法
Dec 15 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
ElementUI radio组件选中小改造
Aug 12 Javascript
Webpack3+React16代码分割的实现
Mar 03 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
PHP初学者最感迷茫的问题小结
2010/03/27 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP PDOStatement::execute讲解
2019/01/31 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
nodejs基础应用
2017/02/03 NodeJs
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
使用PYTHON创建XML文档
2012/03/01 Python
跟老齐学Python之编写类之四再论继承
2014/10/11 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
PyQt5实现下载进度条效果
2018/04/19 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
python 字符串追加实例
2019/07/20 Python
解决python 找不到module的问题
2020/02/12 Python
python可以用哪些数据库
2020/06/22 Python
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
洲际酒店集团英国官网:IHG英国
2019/07/10 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
新疆民族团结演讲稿
2014/08/27 职场文书
小学教师师德师风个人整改措施
2014/09/18 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
部门群众路线教育实践活动对照检查材料思想汇报
2014/10/07 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android