粒子-火与水

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
w = ctx.canvas.width = window.innerWidth;
h = ctx.canvas.height = window.innerHeight;
window.onresize = function() {
  w = ctx.canvas.width = window.innerWidth;
  h = ctx.canvas.height = window.innerHeight;
  cx=w/2;cy=h/2;
};
dots=[];
cx=w/2;cy=h/2;

var controls = new function() {
  this.maxDots = 500;
  this.maxSpeed = 3;
  this.minSpeed = 1;
  this.emitRate = 10;
  this.emitNum = 2;
  this.radius = 2;
  this.trail = 0.2;
  this.maxTime = 3000;
  this.minTime = 1000;
  this.glow = 0;
  
  this.redraw = function() {
    clearInterval(emitter)
    emitter = setInterval(emitDots, controls.emitRate);
  }
}

var gui = new dat.GUI({resizable : false});
var f1 = gui.addFolder('Emitter');
var f2 = gui.addFolder('Particles');
f1.add(controls, "maxDots", 50, 1000).step(10).onChange(controls.redraw);
f1.add(controls, "emitNum", 1, 20).step(1).onChange(controls.redraw);
f1.add(controls, "emitRate", 10, 1000).step(10).onChange(controls.redraw);
f2.add(controls, "maxSpeed", 2, 3).onChange(controls.redraw);
f2.add(controls, "minSpeed", 1, 2).onChange(controls.redraw);
f2.add(controls, "maxTime", 3000, 6000).step(50).onChange(controls.redraw);
f2.add(controls, "minTime", 1000, 3000).step(50).onChange(controls.redraw);
f2.add(controls, "radius", 1, 3).onChange(controls.redraw);
f2.add(controls, "trail", 0.05, 0.4).onChange(controls.redraw);
f2.add(controls, "glow", 0, 30).step(1).onChange(controls.redraw);

emitter = setInterval(emitDots, controls.emitRate);
draw();

canvas.onmousemove=function(e) {cx=e.clientX;cy=e.clientY;};
canvas.ontouchmove=function(e){cx=e.changedTouches[0].pageX;cy=e.changedTouches[0].pageY;}
canvas.onmouseleave=function(){cx=w/2;cy=h/2;}
canvas.ontouchend=function(){cx=w/2;cy=h/2;}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg