php星空背景动态,JS实现动态星空背景效果
本文实例为大家分享了JS实现动态星空背景的具体代码,供大家参考,具体内容如下
这里我截取的是一个图片,实际上是会动的。废话不多说,上代码。
HTML:
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();
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
php星空背景动态,JS实现动态星空背景效果相关推荐
- 动态星空效果html,JS实现动态星空背景效果
本文实例为大家分享了JS实现动态星空背景的具体代码,供大家参考,具体内容如下 这里我截取的是一个图片,实际上是会动的.废话不多说,上代码. HTML: CSS: /*css reset */ body ...
- rem 布局动态 js封装动态获取屏幕宽度
rem,实现宽高自适应布局 原理:根据的是html的font-size大小改变的,正是这样,可以在每个设备下面设置html的根字号,实现自适应布局 方法:使用媒体查询设置和使用js控制 下面介绍比较方 ...
- php星空背景动态,angular2 绘制星空背景图
制作一个星空背景动图 import {Component, OnInit, HostListener} from "@angular/core"; @Component({ sel ...
- html背景边框特效代码,纯JS实现动态边框特效
HtmlCssJs ^-^正常的边框 ^-^更慢的边框 ^-^更快的边框 ^-^图片边框 ^-^更细的边框 附赠的圆形 body { flex-wrap:wrap; flex:1 } .flex { ...
- php+js+背景特效,基于canvas+html5炫酷星空背景动画特效
[温馨提示]源码包解压密码:www.youhutong.com 效果图: 描述说明: Warp drive是一个轻量级的jQuery插件.可以帮助您创建一个很酷的交互式星空背景特效,这个星空背景特效可 ...
- HTML+JS实现星空背景
HTML+JS 实现星空背景 查看效果:http://lsy.deld.vip/article/show/1.html 第一步 html: 创建画布 canvas 并设置 id 为 starfield ...
- vue3 canvas 星空背景图
vue3 canvas 星空背景图 页面截图 代码 页面截图 代码 <template><div ref="container" class="cont ...
- Canvas实现网页星空背景粒子动效跟随光标
目 录 1. 设计思路 2. 星空背景图片 3. 页面代码 4. 效果图 1. 设计思路 1. 利用样式插入星空背景图片: 2.设置窗口改变时自动修改画布大小(自适应): 3. 编写随机函数(随机数 ...
- 『 canvas 特效』一文教你绘制绚丽的星空背景 TS + ES6
介绍 很久没有写关于 canvas 效果的文章了,刚好最近又学到了一个新的特效,使用 canvas 绘制多层次动态星空背景,今天就分享给大家.首先我们依旧来看一下最终实现的效果,如图所示: 由于录制 ...
最新文章
- 深度|机器学习到底能替人干哪些工作?《科学》列出了8条评估标准
- Python 技术篇-httpClient库连接服务器发送请求解析响应实例演示,No module named ‘httplib‘问题解决方法
- C语言结构体对齐的不足
- python linux 优化_Python 代码性能优化技巧
- Wiwiz无线Web认证实现限速
- 随时随地以任意方式编写 .NET 应用程序
- linux telnet 权限,允许telnet 通过root用户进行访问
- java string 返回匹配正则的字符串的起始位置_【Python】正则表达式
- spark启动的worker节点是localhost_Spark大数据在线培训:Spark运行原理解析
- 《原力计划【第二季】》第 8 周周榜揭晓!!!
- 作为技术人为什么想创业
- centos 7 8安装quaartus 遇到的问题及解决方法
- JEP:Java表达式分析器
- Python 解析百度,搜狗词库
- 一键GHOST v2019.08.12优盘教程
- 数学建模国赛编程手必备工具
- C# WinForm 功能代码备忘-刘欣
- easyui手风琴菜单
- 第十五周翻译-《Pro SQL Server Internals, 2nd edition》
- 学生机房随堂测试软件,如何使用随堂测试--立即测?
热门文章
- 房地产行业通过ERP系统开发提高企业整体信息互通!
- 20世纪最优秀的物理学家费曼是如何生活、学习和思考的?
- 李玉婷MYSQL进阶12-视图
- 湖仓一体助力金融科技,巨杉数据库入选艾瑞咨询“2021年中国FinTech TOP 50企业”
- WSDL2Java生成stup
- Angular-组件
- 平衡车入门---MPU6050陀螺仪的使用
- HAL库教程10:定时器的PWM模式应用
- pinyin4j把中文句子(含有多音字字母)转成拼音(二维数组递归求所有组合情况返回list)算法实现!
- flink-cdc同步mysql数据到hbase