粒子绕圆轨迹运动

Html

Css

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var cw = canvas.width = window.innerWidth;
var ch = canvas.height = window.innerHeight;
var cx = cw / 2;
var cy = ch / 2;
var _mx = cx;
var _my = cy;

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

var Point = function(x, y, ang, cr){
    this.x = x;
    this.y = y;
    this.ang = ang;
    this.cr = cr;
    this.v = Math.random()*20+10;
    Point.list.push(this);
}
Point.list = [];

for(let i=0; i<800; i++){
    let ang = Math.random() * 2 * Math.PI;
    let r = 30 + Math.random() * 100;
    _mx = cx + 150*Math.cos(2*Math.PI*i/800);
    _my = cy + 150*Math.sin(2*Math.PI*i/800);
    new Point(_mx, _my, ang, r);
}

document.onmousemove = function(e){
    //_mx = e.pageX;
    //_my = e.pageY;
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

粒子绕圆轨迹运动



代码描述：随机生成一定数量粒子（且粒子角度和半径随机），后让粒子位置按照圆轨迹变化

1

最新

发表评论全部评论

暂时没有评论！

墨子0

2017/4/23 10:03:15

不知道密集恐惧症的人看完会作何感想回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

bibibobo

相关代码

粒子绕圆轨迹运动

最新