canvas粒子球内粒子乱撞动画效果代码
代码语言:html
所属分类:粒子
代码描述:canvas粒子球内粒子乱撞动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{margin:0;background:radial-gradient(circle,#217,#000)}canvas{display:block;margin:100px auto;background:radial-gradient(circle,rgba(20,30,7,0.95) 7%,rgba(80,3,240,0.8) 19%,transparent 60%)} </style> </head> <body> <canvas id="c" /> <script> var ctx, mid; var dots = [], target = []; var maxForce = 0.1247; function Vector(a, b) { this.x = a; this.y = b } Vector.prototype.add = function(a) { this.x += a.x; this.y += a.y }; Vector.prototype.sub = function(a) { this.x -= a.x; this.y -= a.y }; Vector.prototype.mult = function(a) { this.x *= a; this.y *= a }; Vector.prototype.norm = function() { return (Math.sqrt(Math.pow(this.x, 2) + Math.pow(this.y, 2))) }; Vector.prototype.move = function(a) { if (dist(this.x + a.x, this.y + a.y, mid.x, mid.y) > 190) { a.mult(-0.43) } this.add(a) }; function Dot(a, b) { this.pos = new Vector(a, b); this.vel = new Vector(rand(), rand()); this.vel.mult(5 / this.vel.norm()); this.acc = new Vector(rand(), rand()); this.acc.mult(5 / this.acc.norm()) } Dot.prototype.update = function() { this.pos.move(this.vel); this.vel.add(this.acc); this.acc.mult(0) }; Dot.prototype.seek = function(e) { var b = new Vector(0, 0); b.add(e); b.sub(this.pos); var a = b.norm(); b.mult((a < 25) ? -a : a); var c = new Vector(0, 0); c.add(b); c.sub(this.ve.........完整代码请登录后点击上方下载按钮下载查看
网友评论0