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 ...
最新文章
- YOLOV4各个创新功能模块技术分析(二)
- JMH 和 Arthas 定位问题的案例分享 !
- Float浮点数的使用和条件
- 初中文化能学编程吗_儿童早教益智,乐森星际特工智能编程机器人体验
- php ajax 注册,非常实用的ajax用户注册模块
- 进阶中级程序员需要做的事
- 字符串hash(二)
- python csv pandas_Python Pandas——Read_csv详解
- scala下划线的用法
- sublime能编译PHP吗,让sublime编译php、js
- Amos实操教程 | 中介效应检验
- 软件工程:可行性研究
- Word删除指定一页的页码
- excel 柱状图 多个水滴图组合
- 【Unity3D-Mirror多人坦克大战】子弹及其开火位置的生成、子弹开火逻辑(四)
- 基于一道ctf 引发的 TP链分析
- easyexcel插件
- P2006 赵神牛的游戏
- 【Security】可信网络连接
- 漫画:三分钟学习一道位运算的面试题,万一遇到了呢?
热门文章
- C++ 遇到的 error C2146, C2065 报错信息的解决
- x86 CPU中逻辑地址到物理地址映射过程
- 方法的调用 +形参/实参
- 朋友圈微信额度测算,请谨慎点击!
- leetcode1-100
- 【第75期】《失控玩家》引发的思考:我们究竟离真正的人工智能有多远?
- 名帖169 李邕 行书《云麾将军碑》
- MEDSAMreadme
- 狄慧201771010104《面向对象程序设计(java)》第十四周学习总结
- 嵌入式linux驱动自动化测试,通用的嵌入式自动化测试框架 - 心心草的个人空间 - 51Testing软件测试网 51Testing软件测试网-软件测试人的精神家园...