广创网-网站建设公司

反腐

百度SEO和谷歌SEO有什么区别?

今天在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: 0;margin: 0;}body {width: 100vw;height: 100vh;background: #000000;}.container {width: 100vw;height: 100vh;position: relative;}img {width: 100vw;height: 80vh;}svg {position: absolute;top: 0;left: 0;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

相关文章