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 ...
最新文章
- python cv2 轮廓的包络 面积_Python 基于FIR实现Hilbert滤波器求信号包络详解
- 科普丨莫拉维克悖论(人工智能中最重要的发现之一)
- 漫谈“外来的和尚会念经”
- Xcode7.2如何真机调试iOS 9.3的设备
- python百题百练 二级题目_计算机二级有必要考吗
- python——初识python篇
- 同方自主可控系统服务器,自主可控 同方超强TR1210服务器!
- 深入理解 MySQL ——锁、事务与并发控制
- 学堂在线计算机挂了咋办,各位师兄师姐我想问下计算机挂了是直接重修吗(#泪)...
- Java的数据库编程之入门案例
- 软件测试第一部分——初步概念与过程
- GDAL源码剖析(十三)之GDAL网格插值说明
- 高通qusb bulk驱动_1999元!Redmi新机发布:首发高通全新SoC
- 7.jenkins 发布邮件
- Objective-C中 copy, tetain, assign , readonly , readwrite, nonatomic区别
- 难以回答的问题:注册监听器有什么用?
- 安全港到隐私护盾!美欧个人数据跨境流动20年政策变迁
- Spring的AspectJ包的下载及下载缓慢的解决方法
- 修改配置文件不用重启tomcat
- vivos7和vivox50哪个好 vivos7和华为p40参数配置区别
热门文章
- 又是一年1024(2019)
- CC2640R2F之配对绑定与解除绑定篇
- 迅软信息签约安龙基因医药技术构建医药行业防护体
- 有什么软件android跟电脑连接无线,手机电脑连接的软件有哪些(安卓手机连接电脑的方法)...
- 关于excel:具有OR条件的SUMIF
- 微信小程序rotateZ实现卡片翻转
- 2M字节Flash Rom存储器W25Q16/W25X16 认识Flash
- 坚果云显示连接服务器失败怎么办,坚果云提示同步过程中遇到错误,怎么解决?...
- 快速提取Word文档中的所有图片
- 如何给原图添加文字水印和图片水印