html 星空效果,HTML5JSstar_动态星空效果
一、案例介绍
这个案例主要运用了html5播放引用的功能。
播放音乐代码如下:
星空效果是用canvas绘制的,代码如下:
"use strict";
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 = 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) / 8;
//星星大小
this.orbitX = w / 2;
this.orbitY = h / 2;
this.timePassed = random(0, maxStars);
this.speed = random(this.orbitRadius) / 50000;
//星星移动速度
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();
html 星空效果,HTML5JSstar_动态星空效果相关推荐
- 动态星空效果html,JS实现动态星空背景效果
本文实例为大家分享了JS实现动态星空背景的具体代码,供大家参考,具体内容如下 这里我截取的是一个图片,实际上是会动的.废话不多说,上代码. HTML: CSS: /*css reset */ body ...
- 【荐】JS实现类似星球仿flash效果的动态菜单
代码简介:推荐朋友们看看,非常值得,JS类似flash,又有点星空的感觉. 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra ...
- 金蝶云星空简单账表动态列名汇总
简单账表基础链接 序言: 本文章是Bos金蝶云星空开发简单账表的进阶版.之前有个小伙伴说不知道怎么汇总动态列数据,一两句话讲不清楚,写下这篇文章. 思路: 1.动态列来自数据库,用公共容器把他存储起来 ...
- 动态星空html设计作品,HTML+CSS实现自己的动态星空
先上效果图,emmm,图是静态的,至于动态效果自己下载代码实现就好啦! 星空 设计思路 用绝对定位(position:absolute)为不同的图设置层级 动态实现用到CSS的动画效果 上代码 htm ...
- 【程序化天空盒】过程记录03:镜头光晕 旋转的动态星空
本来说不再记录了,发现实现镜头光晕和星空的时候是有很多需要注意的点的,有必要记录一下. 镜头光晕 URP系列教程-手把手教你在URP中实现镜头光晕效果 | Unity 中文课堂 (u3d.cn) 但是 ...
- JS打字效果的动态菜单代码分享
这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...
- 实现类似表格内容动态滚动效果
文章目录 需求背景 效果图 实现思路 示例代码 需求背景 在一些大屏首页展示上,通常会有一些表格展示,由于大屏的特殊性,不会有人专门去操作这个页面查看相应数据,一般都会采用动态滚动的效果.下面是具体的 ...
- 【CSON原创】HTML5字体动态粒子效果发布
功能说明: 输入字体,按确定后,右侧画布出现字体的动态粒子效果. 效果预览: 输入显示内容: 实现分析: 之前看过hongru的事情没有想象中那么难--JX官网首页3D粒子效果,和当耐特砖家的HTML ...
- c语言星空程序,C语言实现动态星空
1./ 编译环境:Visual C+ 6.0,EasyX 2014冬至版/ e a s y x . c n/#include #include #include #define MAXSTAR 200 ...
最新文章
- AI开发人员使用频率最高的10个机器学习平台!
- JVM调优:栈上分配和线程本地分配TLAB
- ICEfaces抄袭PrimeFaces
- 3.19PMP试题每日一题
- centos 安装java sdk_Linux——CentOS7使用yum命令安装Java SDK
- Shell脚本8种字符串截取方法总结
- 拟合三维点平面matlab程序
- javaShop JAVA版多用户B2B2C商城源码(PC +H5+小程序+APP)
- 如何用快解析自制IoT云平台
- php 网页qq一键登录,给网站添加一键qq登录的功能
- ArcGIS模拟3D洪水
- 在英伟达 jeason nano配置yolov5
- 为什么那么多人吐槽华为员工35岁就会被辞退?HR告诉你真实情况
- python str转list
- 使用PC端谷歌Chrome浏览器浏览手机网页 修改PC端谷歌Chrome浏览器UA
- 行业云服务——乐视云点播服务试用体验
- 这位“华为天才少年”,竟然要我用“充电宝”打《只狼》
- Java开源 Web开发框架 (一)
- 有向图的邻接矩阵表示求各节点的度、出度和入度-----数据结构与算法笔记
- oracle撤销段的功能,oracle撤销表空间和回滚段
热门文章
- (小甲鱼python)集合笔记合集一 集合(上)总结 集合的简单用法 集合的各种方法合集:子、交、并、补、差、对称差集、超集
- 2.1.7设置字体大小
- MapReduce经典案例总结
- python 浏览器 弹 另存为_selenium webdriver 右键另存为下载文件(结合robot and autoIt)...
- Dremio 数据湖以及数据仓库
- 社交电商如何持续进化?来看看最新的拼团玩法——七人拼团
- 设计模式七大原则总结
- 匈牙利命名法、驼峰式命名法、帕斯卡命名法
- java中outer:的用法
- 安装和配置 苹果CMS v10 的记录 搭建教程