canvas火花

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var canvas = document.createElement("canvas"),
  c = canvas.getContext("2d");
var w = canvas.width = window.innerWidth,
  h = canvas.height = window.innerHeight;

document.body.appendChild(canvas);

c.fillStyle = "rgba(30,30,30,1)";
c.fillRect(0, 0, w, h);

class fly{
  constructor(x,y){
    this.x = x;
    this.y = y;
    this.vx = 0;
    this.vy = 0;
    this.fx = 0;
    this.fy = 0;
    this.trail = [];
    this.t = 0.5;
  }
  addforce(f,ang){
   this.tfx = f*Math.cos(ang);
   this.tfy = f*Math.sin(ang);
   this.fx += f*Math.cos(ang);
   this.fy += f*Math.sin(ang);
  }
  calc(){
    this.vx += this.fx*this.t;
    this.vy += this.fy*this.t;
    this.x += this.vx*this.t;
    this.y += this.vy*this.t;
    this.trail.push({x: this.x, y: this.y});
    if(this.trail.length > 5){
      this.trail.splice(0,1);
    }
  }
  showforce(){
   c.beginPath();
   c.lineTo(this.x,this.y);
   c.lineTo(this.x+100*this.tfx,this.y+100*this.tfy);
   c.strokeStyle="red";
   c.stroke();
  }
  show(){
    c.beginPath();
    c.arc(this.x,this.y,2,0,2*Math.PI);
    c.fillStyle="#ffeca8";
    c.fill();
    
    c.beginPath();
    for(var i = 0; i < this.trail.length; i++){
      c.lineTo(this.trail[i].x,this.trail[i].y);
    }
    c.strokeStyle="#ffeca8";
    c.stroke();
  }
}

var fl = [],
    x = w/2,
    y = 100;

window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();

function loop() {

setTimeout(function() {
    window.requestAnimFrame(loop);
    c.fillStyle = "rgba(30,30,30,0.1)";
    c.fillRect(0, 0, w, h);
    draw();
  }, 1000 / 60);

}

window.addEventListener('resize', function() {
  w = canvas.width = window.innerWidth,
    h = canvas.height = window.innerHeight;
  c.fillStyle = "rgba(30,30,30,1)";
  c.fillRect(0, 0, w, h);
  draw();
});

loop();

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