html图片以烟花展现,HTML5花环式烟花绽放动画
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
const Bounds = {
height: window.innerHeight,
width: window.innerWidth
};
const colors = ['#15AB88', '#6AD97D', '#AEFF79', '#D0FF78', '#F1FF79'];
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = Bounds.width;
canvas.height = Bounds.height;
document.body.appendChild(canvas);
class Circle {
constructor(center, radius, color, alpha) {
this.center = center;
this.radius = 0;
this.maxRadius = radius;
this.color = color;
this.triangles = this.generateTriangles();
this.alpha = alpha;
}
generateTriangles() {
let triangles = [];
for(let i = 0; i <= Math.PI*2; i += Math.PI/5) {
triangles.push(new Triangle({
x: this.center.x + this.radius * Math.cos(i),
y: this.center.y + this.radius * Math.sin(i),
},
i,
25,
this.color
));
}
return triangles;
}
update() {
if(this.radius / this.maxRadius > 0.985) {
this.radius = 0;
this.alpha = Math.PI * Math.random();
}
this.radius += (this.maxRadius - this.radius) * 0.02;
}
render() {
this.triangles.forEach((triangle, index) => {
triangle.position = {
x: this.center.x + this.radius * Math.cos(triangle.alpha + this.alpha),
y: this.center.y + this.radius * Math.sin(triangle.alpha + this.alpha),
};
triangle.size = triangle.maxSize * Math.sin(Math.PI*(this.radius/this.maxRadius))
let t1, t2;
if(index === 0) {
t1 = this.triangles[this.triangles.length-1].position;
} else {
t1 = this.triangles[index-1].position;
}
t2 = triangle.position;
const gradient = context.createLinearGradient(t1.x, t1.y, t2.x, t2.y);
gradient.addColorStop(0, 'rgba(235, 235, 250, 0.5)');
gradient.addColorStop(0.5, 'rgba(235, 235, 250, 0)');
gradient.addColorStop(1, 'rgba(235, 235, 250, 0.5)');
context.beginPath();
context.strokeStyle = gradient;
context.moveTo(t1.x, t1.y);
context.lineTo(t2.x, t2.y);
context.stroke();
context.closePath();
triangle.render();
});
}
}
class Triangle {
constructor(position, alpha, size, color) {
this.position = position;
this.size = 0;
this.maxSize = size/3 + 2*size/3*Math.random();
this.color = color;
this.alpha = alpha;
this.angle = 0;
}
render() {
this.angle += Math.PI/24;
context.save();
context.translate(this.position.x, this.position.y);
context.rotate(this.angle + this.alpha);
context.fillStyle = this.color;
context.beginPath();
context.moveTo(0, -this.size/2);
context.lineTo(-this.size/2 ,this.size/2);
context.lineTo(this.size/2 ,this.size/2);
context.closePath();
context.fill();
context.restore();
}
}
let circles = [];
for(let i = 0; i <= 12; i++) {
circles.push(new Circle({x: Bounds.width/2, y: Bounds.height/2}, 160+(160*Math.random())-80, colors[(i+1)%colors.length], Math.PI * Math.random()));
}
function loop() {
context.clearRect(0, 0, Bounds.width, Bounds.height);
circles.forEach((circle, index) => {
circle.render();
setTimeout(() => circle.update(), 0);
});
requestAnimationFrame(loop);
}
loop();
window.onresize = () => {
Bounds.width = window.innerWidth;
Bounds.height = window.innerHeight;
canvas.width = Bounds.width;
canvas.height = Bounds.height;
circles = [];
for(let i = 0; i <= 12; i++) {
circles.push(new Circle({x: Bounds.width/2, y: Bounds.height/2}, 160+(160*Math.random())-80, colors[(i+1)%colors.length], Math.PI * Math.random()));
}
}
html图片以烟花展现,HTML5花环式烟花绽放动画相关推荐
- 2023跨年烟花代码HTML5夜景放烟花绽放动画效果
2023跨年烟花代码HTML5夜景放烟花绽放动画效果 HTML5夜景放烟花绽放动画效果 html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- 【转】CSS 与 HTML5 响应式图片
关于响应式的,近来国内外也不断提到,还是目前比较流行的技术话题,这篇文章来至淘宝UED的,讲得是响应式图片,写得很不错. 随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图 ...
- CSS 与 HTML5 响应式图片
随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变 ...
- HTML5 Canvas 超逼真烟花绽放动画
各位前端朋友们,大家好!五一假期即将结束,在开启加班模式之前,我要给大家分享一个超酷超逼真的HTML5 Canvas烟花模拟动画.这次升级版的烟花动画有以下几个特点: 烟花绽放时,将展现不同的色彩,不 ...
- 南京html5响应式网站,HTML5响应式布局的设计方法和响应式前端优化
作为一名优秀的web前端人员,不懂响应式布局怎么可以呢? 今天跟大家分享web前端开发和设计的干货:关于响应式布局的设计方法和响应式前端优化. 我们都知道,目前主流的pc屏幕的分辨率都是1366*76 ...
- HTML5响应式吸塑包装定制塑胶制品类织梦模板
介绍: HTML5响应式吸塑包装定制塑胶制品类织梦模板,自适应手机版,响应式全屏自适应布局设计. 适用于环保塑料材料模板.html5响应式网站模板:首页和全局重新做了全面优化,方便大家无缝使用: 网站 ...
- HTML5响应式品牌服装设计类织梦模板
介绍: HTML5响应式品牌服装设计类织梦模板,响应式布局设计,非常时尚大气. 模板整体以多种颜色为主色调,适合做各种类型的网站. 同一个后台管理三网合一简单方便,体验极佳 网盘下载地址: http: ...
- 在线教育学习平台网校系统v2020 html5响应式在线教育培训类企业使用+安装说明
介绍: 企业商学院学习平台简介:1.该软件属于企业通用.html5 响应式.在线教育.在线培训类企业使用,一款适用性很强的网校系统,基本可以适合各行业的企业商学院! 2.响应式自适应各种移动设备,同一 ...
- HTML5响应式手机模板:电商网站设计——仿淘宝手机app界面模板源码 HTML+CSS+JavaScript...
HTML5响应式手机模板:电商网站设计--仿淘宝手机app界面模板源码 HTML+CSS+JavaScript 手机电商模板 手机网站模板 企业手机网站模板 手机网站模板 手机模板 响应式手机网站 h ...
最新文章
- 用ssh远程登录服务器时,怎么直接以root用户登录?(需要修改配置,如果不想修改,可以先用普通用户登录再su切换到root用户)
- 【Java代码】使用双冒号 :: 简洁代码及方法引用(静态方法+构造方法+实例方法+函数式编程举例)
- Android Studio设置
- 苹果推出Apple Pay防欺诈功能 目前仅限于Visa
- SpaceX星舰飞船首次试飞成功着陆!但没想到还是爆炸了...
- 别被官方文档迷惑了!这篇文章帮你详解yarn公平调度
- windows安装jdk与配置环境变量详解
- php网页表格样式,分享7款颜色的CSS表格样式美化网页表格用户体验
- ArcCatalog连接PostgreSQL创建SDE库
- photoshop ps 证件照 照片 换底色
- MSP430开发环境配置
- laravel maatwebsite/excel3.1 导入导出详解
- 字美杯装饮料茶点打印机
- 生日祝福卡片 html,暖心的卡片生日祝福语
- 中国工业阀门市场运营状况分析及投资竞争调研报告2022年版
- 计算机学习常用网站总结
- 信息管理毕设新颖题目
- 7. Robert Waldinger: What makes a good life? Lessons from the longest study on happiness | TED Talk
- 人工智能——DBSCAN密度聚类(Python)
- 【ChatGPT Perpetuates Gender Bias in Machine Translation and Ignores Non-Gendered Pronouns... 论文精读】
热门文章
- python合并excel,区分隐藏列和非隐藏列
- 分布式架构系列: 负载均衡技术详解 | 技术头条
- JS逆向案例2:咪咕视频——学会模块改写
- 骁龙778g相当于天玑多少 骁龙778g和天机1000+哪个好
- Mac 终端命令行读写NTFS硬盘方法
- 服务器刷怪塔制作方法,我的世界简易刷怪塔制作方法
- 相比谷歌微软,苹果今年的WWDC可能有些凉凉
- Plextor 浦科特M7VC性能
- MySQL企业版工具——使用MySQL Enterprise Monitor监控MySQL数据库和主机---发表到爱可生开源社区
- 宝塔安装sqlserver_windows 宝塔安装sql_server 2008,php链接配置流程