今天在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 实现烟花鲜果的更多相关文章

  1. D3.js学习(七)

    上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...

  2. D3.js学习(一)

    从今天开始我将和大家一起学习D3.js(Data-Driven Documents),由于国内关于D3的学习资料少之又少,所以我觉得很有必要把自己学习过程记录下来,供同学们参考,如果文章有有哪些表达有 ...

  3. D3.js学习记录

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. D3.js部署node环境开发

    总结一段D3.js部署node环境的安装过程 准备阶段: 首先电脑上要安装node环境,这个阶段过滤掉,如果node环境都不会装,那就别玩基于node环境搞的其他东西了. 搭建环境: 我在自己的F:系 ...

  5. d3.js读书笔记-1

    d3.js入门 d3入门 D3是一个强大的数据可视化工具,它是基于Javascript库的,用于创建数据可视化图形.在生成可视化图形的过程中,需要以下几步: 把数据加载到浏览器的内存空间: 把数据绑定 ...

  6. 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)

    缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...

  7. [资料搜集狂]D3.js数据可视化开发库

    偶然看到一个强大的D3.js,存档之. D3.js 是近年来十分流行的一个数据可视化开发库. 采用BSD协议 源码:https://github.com/mbostock/d3 官网:http://d ...

  8. D3.js 用层画条形图

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 【 D3.js 入门系列 --- 3 】 做一个简单的图表!

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

随机推荐

  1. AUTOSAR学习之RTE - 可运行实体

    本文介绍RTE的运行体(runnable). An AUTOSAR component defines one or more "runnable entities". A run ...

  2. kube-scheduler源码分析

    kubernetes集群三步安装 kube-scheduler源码分析 关于源码编译 我嫌弃官方提供的编译脚本太麻烦,所以用了更简单粗暴的方式编译k8s代码,当然官方脚本在编译所有项目或者夸平台编译以 ...

  3. 创建String对象过程的内存分配

      转载自  https://blog.csdn.net/xiabing082/article/details/49759071       常量池(Constant Pool):指的是在编译期被确定 ...

  4. Java基础:数组Array转成List的几种方法

    在编写Java程序中,经常要用的一个转换就是数组和List对象之间的互转. 最简单的方法就是遍历 数组,然后将数组元素依次添加进list中. 此方法略,虽然方法很简单,但总感觉这样的方法有点笨 第二种 ...

  5. 【Java例题】2.1复数类

    1.定义复数类,包括实部和虚部变量.构造方法. 加减乘除方法.求绝对值方法和显示实部.虚部值的方法. 然后编写一个主类,在其主方法中通过定义两个复数对象来 显示每一个复数的实部值.虚部值和绝对值, 显 ...

  6. SpringBoot 2 HTTP转HTTPS

    @Bean public TomcatServletWebServerFactory servletContainer() { TomcatServletWebServerFactory tomcat ...

  7. 自定义markdown代码高亮显示-cnblog

    这个代码高亮..一点儿都不高亮...... cnblog里已经有闻道先者贴出代码了, https://www.cnblogs.com/liutongqing/p/7745413.html 效果大概是这 ...

  8. 我的第一个CAD程序

    [步骤1]新建项目 启动Visual Studio 2010,然后选择一个C#类库,设置好名称和保存位置,点击[确定] [步骤2]添加引用文件AcMgd.dll和AcDbMgd.dll 首次使用时,[ ...

  9. python骚操作---Print函数用法

    ---恢复内容开始--- python骚操作---Print函数用法 在 Python 中,print 可以打印所有变量数据,包括自定义类型. 在 3.x 中是个内置函数,并且拥有更丰富的功能. 参数 ...

  10. 实测总结 挂载远程文件夹方案 smb ftp sftp nfs webdav

    挂载远程文件夹的方法有: 1.smb 2.ftp 3.sftp 4.nfs 5.webdav 1.smb windows局域网使用的协议,windows网上邻居发现的共享文件夹即使用的smb协议,可以 ...