canvas下落弹跳动画

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

canvas = document.getElementById("canvas");
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;
};

parts = [];
emitCount = 1;
textSize = 30;
glowSize = 20;
pullRadius = 50;
maxTime = 5000;
minTime = 3000;
spawnRate = 300;
limitDots = 100;
trailSize = 0.9;
cmpx = -pullRadius;
cmpy = -pullRadius;

function draw(){
  for (i = 0; parts.length > i; i++) {
    var dif = (Date.now()-parts[i].ts)/parts[i].tl;
    var pct = 1 - (Math.round(dif*100)/100);
    
    ctx.beginPath();
    ctx.strokeStyle = "hsla(0,0%,100%,"+pct+")";
    ctx.lineWidth = textSize/4;
    ctx.fillStyle = "hsla("+parts[i].h+", 100%, 50%, "+pct+")";
    ctx.shadowColor = "hsla("+parts[i].h+", 100%, 50%, "+pct+")";
    ctx.shadowBlur = glowSize;
    ctx.font = "bold "+textSize+"px sans-serif";
    ctx.strokeText("100", parts[i].x-(textSize), parts[i].y+(textSize/2));
    ctx.fillText("100", parts[i].x-(textSize), parts[i].y+(textSize/2));
    ctx.closePath();
  }
  
  ctx.beginPath();
  ctx.strokeStyle = "hsla(0,0%,100%,1)";
  ctx.arc(cmpx,cmpy,pullRadius,0,Math.PI*2);
  //ctx.stroke();
  ctx.closePath();
}

function lifeTime(){
  for (i = 0; parts.length > i; i++) {
    if(parts[i].ts + parts[i].tl < Date.now()){
      parts.splice(i,1);
    }
  }
}

function clearCanvas(){
  ctx.shadowBlur = 0;
  ctx.fillStyle="rgba(0,0,0,"+Math.abs(trailSize-1)+")"
  ctx.rect(0,0,w,h);
  ctx.fill();
}

function dist(x1, y1, x2, y2) {
  var a = x1 - x2;
  var b = y1 - y2;
  return Math.sqrt(a * a + b * b);
}

function render() {
  clearCanvas();
  draw();
  physics();
  lifeTime();
}

document.onmousemove = function(e) {
  cmpx = e.clientX;
  cmpy = e.clientY;
};
document.ontouchmove = function(e){
  cmpx = e.changedTouches[0].pageX;
  cmpy = e.changedTouches[0].pageY;
}

setInterval(create, spawnRate);
setInterval(render, 17);

canvas.onmouseleave = function(){
  cmpx = -pullRadius;
  cmpy = -pullRadius;
}

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