d3.js 实现烟花鲜果
今天在d3.js官网上看到了一个烟花的DEMO,是canvas制作的,于是我想用d3.js来实现它,js代码只有几行。好了废话不多说,先上图。
1 js 类
因为烟花要有下落的效果,所以里面用到了一些简单的数学和物理知识来模拟重力,
class Firework {
constructor() {
this._heightLimit = [100,200];
this._width = 1288;
this._svg = null;
this._tempObj = {};
this._colors = d3.scaleLinear().domain([0,1,2,3,4,5]).range(['#f00','#ff0','#f0f','#0ff','#0f0'])
this.initSvg();
}
initSvg() {
this._svg = d3.select('body').append('svg');
this._width = window.innerWidth;
}
randomPosition() {
setInterval(() => {
let x = Math.floor(Math.random() * (this._width - 200) + 100);
let y = Math.floor(Math.random() * (this._heightLimit[1] - this._heightLimit[0]) + this._heightLimit[0]);
let v = Math.random() * 20 + 40;
let c = Math.random() * 4;
this.renderFire(x,y,v,c)
}, Math.floor(Math.exp(-Math.random()) * 800))
}
renderFire(x,y,v,c) {
let stamp = new Date().getTime();
let temp = d3.range(18).map(d => {
return {
cx: x + 1 * Math.sin(Math.PI * d / 9),
cy: y - 1 * Math.cos(Math.PI * d / 9),
vx: v * Math.sin(Math.PI * d / 9),
vy: - v * Math.cos(Math.PI * d / 9)
}
})
let t = 0;
this._tempObj[stamp] = setInterval(() => {
let cutStamp = new Date().getTime();
for(var i=0; i<18; i++) {
this._svg.append('circle')
.attr('cx', temp[i].cx + temp[i].vx * t / 8)
.attr('cy', t * t / 16 + temp[i].vy * t / 8 + temp[i].cy)
.attr('r', 6)
.attr('fill', this._colors(c))
.attr('fill-opacity', 1)
.transition()
.duration(300)
.attr('fill-opacity', 0)
.on('end', function() {
d3.select(this).remove();
})
}
if(cutStamp - stamp > 2000){
clearInterval(this._tempObj[stamp])
}
t ++;
}, 40)
}
start() {
this.randomPosition();
}
}
2 css 代码
* {
padding:;
margin:;
}
body {
width: 100vw;
height: 100vh;
background: #000000;
}
.container {
width: 100vw;
height: 100vh;
position: relative;
}
img {
width: 100vw;
height: 80vh;
}
svg {
position: absolute;
top:;
left:;
width: 100vw;
height: 100vh;
}
3 html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<script type="text/javascript" src="js/d3.v4.js"></script>
<script type="text/javascript" src="js/base.js"></script>
</head>
<body>
<div class="container">
<img src="img/bg.jpg">
</div>
<script>
var firework = new Firework();
firework.start()
</script>
</body>
</html>
是不是很简单
想预览或者下载demo的人请移步至原文
原文地址 1
d3.js 实现烟花鲜果的更多相关文章
- D3.js学习(七)
上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...
- D3.js学习(一)
从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...
- D3.js学习记录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- D3.js部署node环境开发
总结一段D3.js部署node环境的安装过程 准备阶段: 首先电脑上要安装node环境,这个阶段过滤掉,如果node环境都不会装,那就别玩基于node环境搞的其他东西了. 搭建环境: 我在自己的F:系 ...
- d3.js读书笔记-1
d3.js入门 d3入门 D3是一个强大的数据可视化工具,它是基于Javascript库的,用于创建数据可视化图形.在生成可视化图形的过程中,需要以下几步: 把数据加载到浏览器的内存空间: 把数据绑定 ...
- 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)
缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...
- [资料搜集狂]D3.js数据可视化开发库
偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d ...
- D3.js 用层画条形图
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表!
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
随机推荐
- AUTOSAR学习之RTE - 可运行实体
本文介绍RTE的运行体(runnable). An AUTOSAR component defines one or more "runnable entities". A run ...
- kube-scheduler源码分析
kubernetes集群三步安装 kube-scheduler源码分析 关于源码编译 我嫌弃官方提供的编译脚本太麻烦,所以用了更简单粗暴的方式编译k8s代码,当然官方脚本在编译所有项目或者夸平台编译以 ...
- 创建String对象过程的内存分配
转载自 https://blog.csdn.net/xiabing082/article/details/49759071 常量池(Constant Pool):指的是在编译期被确定 ...
- Java基础:数组Array转成List的几种方法
在编写Java程序中,经常要用的一个转换就是数组和List对象之间的互转. 最简单的方法就是遍历 数组,然后将数组元素依次添加进list中. 此方法略,虽然方法很简单,但总感觉这样的方法有点笨 第二种 ...
- 【Java例题】2.1复数类
1.定义复数类,包括实部和虚部变量.构造方法. 加减乘除方法.求绝对值方法和显示实部.虚部值的方法. 然后编写一个主类,在其主方法中通过定义两个复数对象来 显示每一个复数的实部值.虚部值和绝对值, 显 ...
- SpringBoot 2 HTTP转HTTPS
@Bean public TomcatServletWebServerFactory servletContainer() { TomcatServletWebServerFactory tomcat ...
- 自定义markdown代码高亮显示-cnblog
这个代码高亮..一点儿都不高亮...... cnblog里已经有闻道先者贴出代码了, https://www.cnblogs.com/liutongqing/p/7745413.html 效果大概是这 ...
- 我的第一个CAD程序
[步骤1]新建项目 启动Visual Studio 2010,然后选择一个C#类库,设置好名称和保存位置,点击[确定] [步骤2]添加引用文件AcMgd.dll和AcDbMgd.dll 首次使用时,[ ...
- python骚操作---Print函数用法
---恢复内容开始--- python骚操作---Print函数用法 在 Python 中,print 可以打印所有变量数据,包括自定义类型. 在 3.x 中是个内置函数,并且拥有更丰富的功能. 参数 ...
- 实测总结 挂载远程文件夹方案 smb ftp sftp nfs webdav
挂载远程文件夹的方法有: 1.smb 2.ftp 3.sftp 4.nfs 5.webdav 1.smb windows局域网使用的协议,windows网上邻居发现的共享文件夹即使用的smb协议,可以 ...