今天在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. 【Java笔记】【Java核心技术卷1】chapter3 D5运算符

    package chapter3; import java.math.*; //引入数学类 //枚举类型 enum Size{SMALL,MEDIUM,LARGE}; public class D5运 ...

  2. LeetCode刷题总结之双指针法

    Leetcode刷题总结 目前已经刷了50道题,从零开始刷题学到了很多精妙的解法和深刻的思想,因此想按方法对写过的题做一个总结 双指针法 双指针法有时也叫快慢指针,在数组里是用两个整型值代表下标,在链 ...

  3. abc -- 牛客

    题目描述 设a.b.c均是0到9之间的数字,abc.bcc是两个三位数,且有:abc+bcc=532.求满足条件的所有a.b.c的值. 输入描述: 题目没有任何输入. 输出描述: 请输出所有满足题目条 ...

  4. RE最全面的正则表达式----终结篇 特殊处理

    三.特殊需求表达式 Email地址:^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$域名:[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0- ...

  5. （十七）c#Winform自定义控件-基类窗体

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...

  6. https理论及实践

    什么是https协议? http协议以明文的方式在网络中传输,安全性难以保证,https在http协议的基础上加入SSL/TLS层.TLS是SSL协议的最新版本,SSL使用SSL数字证书在通信两端建立 ...

  7. 集成Ribbon的客户端调用工具——Feign

    什么是Feign? 客户端调用工具 Ribbon+RestTemplate Feign Feign特性: Feign本身包含Ribbon Fegin是一个采用基于接口的注解的声明式客户端调用工具,更加 ...

  8. 【RabbitMQ】如何进行消息可靠投递【上篇】

    说明 前几天,突然发生线上报警,钉钉连发了好几条消息,一看是RabbitMQ相关的消息,心头一紧,难道翻车了? [橙色报警] 应用[xxx]在[08-15 16:36:04]发生[错误日志异常],al ...

  9. Java 从入门到进阶之路（一）

    写在前面:从本片文章开始,将记录自己学习 Java 的点滴路程,目标定的并不是让自己成为一个 Java 高手,而是让自己多掌握一门语言,使自己的知识面更广一些,在学习 Java 的过程中如有不对的地方 ...

  10. Redis 5.0.5集群搭建

    Redis 5.0.5集群搭建 一.概述 Redis3.0版本之后支持Cluster. 1.1.redis cluster的现状 目前redis支持的cluster特性: 1):节点自动发现 2):s ...