粒子发射器

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var c = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;

window.onresize = function () {
  ctx.canvas.width = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
}

dots = []; emitRate = 9; minRad = 1; maxRad = 5; color = ""; opc = 0.6; sha = 0; lifeTime = 30; tn = 0; roc = 1;

var gui = new dat.GUI({resizable : false});
gui.add(controls, "emitRate", 2, 100).step(1).onChange(controls.redraw);
gui.add(controls, "lifeTime", 10, 300).onChange(controls.redraw);
gui.add(controls, "radiusMin", 1, 10).step(1).onChange(controls.redraw);
gui.add(controls, "radiusMax", 1, 30).step(1).onChange(controls.redraw);
gui.add(controls, "opacity", 0.1, 1).onChange(controls.redraw);
gui.add(controls, "glow", 0, 30).step(1).onChange(controls.redraw);
gui.addColor(controls, "color").onChange(controls.redraw);
gui.add(controls, "circleShape").onChange(controls.redraw);
gui.add(controls, "randomColor").onChange(controls.redraw);
gui.add(controls, "onChange_redraw").onChange(controls.redraw);

prevx = ctx.canvas.width/2 -250;
prevy = ctx.canvas.height/8;
var prev2 = setInterval(preview, 16.67);
increase = Math.PI * 2 / 40;
counter = 0;
function preview(){
  prevx += 8;
  prevy += (Math.sin( counter ) / 2 + 0.5)*8;
  emitDots(prevx, prevy);
  counter += increase;
}
preview();
setTimeout(function(){clearInterval(prev2)}, 1000);

function cleanUp(){
  if(dots.length > 1){
    dots.splice(0, Math.ceil(dots.length/lifeTime));
  }
}

function getFPS(){
  tl = tn;
  tn = Date.now();
  td = tn - tl;
  fps = Math.round(1000/td);
  fps >= 58 ? fps = 60 : fps;
  fpse = document.getElementById("fps");
  fpse.innerHTML = "FPS: "+fps;
  fpse.style="color:hsl("+(fps*2)+",100%,50%)";
}

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