html粒子连接,HTML5/Canvas 粒子连接

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

/* Canvas Variables */

var canvas = document.querySelector('canvas'),

ctx = canvas.getContext('2d'),

w = canvas.width = 720,

h = canvas.height = 720,

timing = 0,

centerX = w / 2,

centerY = h / 2;

/* Function Returning : Random between min and max */

var randInt = function(min, max) {

return (~~(Math.random() * max) - min);

}

/* Function Returning Cart Distance */

var distance = function(ax, ay, bx, by) {

return (~~(Math.sqrt((ax - bx) * (ax - bx) + (ay - by) * (ay - by))));

}

/* Particles Variables */

var numParticles = 50;

var tabParticles = [];

var staticParticles = [];

function Particle(i) {

this.diameter = 2;

this.positionX = canvas.width / 2 + Math.cos(i * (Math.PI * 2) / numParticles) * 200;

this.positionY = canvas.height / 2 + Math.sin(i * (Math.PI * 2) / numParticles) * 200;

this.velocityX = Math.cos(i * (Math.PI * 2) / numParticles);

this.velocityY = Math.sin(i * (Math.PI * 2) / numParticles);

this.speedX = 10;

this.speedY = 2;

}

function Static(i) {

this.positionX = canvas.width / 2 + Math.cos(i * (Math.PI * 2) / numParticles) * 200;

this.positionY = canvas.height / 2 + Math.sin(i * (Math.PI * 2) / numParticles) * 200;

}

/* Static Particles */

for (var i = 0; i < numParticles; i++) {

staticParticles.push(new Static(i));

}

for (var i = 0; i < numParticles; i++) {

tabParticles.push(new Particle(i));

}

function update() {

for (var i = 0; i < numParticles; i++) {

tabParticles[i].positionX += tabParticles[i].velocityX * tabParticles[i].speedX;

tabParticles[i].positionY += tabParticles[i].velocityY * tabParticles[i].speedY;

if (tabParticles[i].positionX >= canvas.width) {

tabParticles[i].velocityX *= -1;

//tabParticles[i].positionX = 0;

} else if (tabParticles[i].positionX <= 0) {

tabParticles[i].velocityX *= -1;

//tabParticles[i].positionX = canvas.width;

}

if (tabParticles[i].positionY >= canvas.height) {

tabParticles[i].velocityY *= -1;

//tabParticles[i].positionY = 0;

} else if (tabParticles[i].positionY <= 0) {

//tabParticles[i].velocityY *= -1;

tabParticles[i].positionY = canvas.height;

}

}

}

var d = 0;

function draw() {

ctx.save();

ctx.fillStyle = 'rgba(95,18,150,1)';

ctx.globalCompositeOperation = "source-over";

ctx.fillRect(0, 0, w, h);

/* */

for (var i = 0; i < numParticles; i++) {

for (var k = 1; k < numParticles; k++) {

if (c = distance(tabParticles[i].positionX, tabParticles[i].positionY, tabParticles[k].positionX, tabParticles[k].positionY) < 150) {

ctx.beginPath();

ctx.lineWidth = 10;

ctx.moveTo(tabParticles[i].positionX, tabParticles[i].positionY);

ctx.lineTo(tabParticles[k].positionX, tabParticles[k].positionY);

ctx.lineWidth = 1;

//ctx.strokeStyle = 'rgba('+i*5+','+93+',125,'+0.4+')';

ctx.strokeStyle = 'rgba(' + i * 5 + ',' + 3 + ',255,' + c / 2 + ')';

ctx.stroke();

}

}

ctx.beginPath();

ctx.arc(

tabParticles[i].positionX,

tabParticles[i].positionY,

tabParticles[i].diameter * 2,

0, 2 * Math.PI, false);

ctx.fillStyle = 'rgba(63,193,255,0.9)';

ctx.fill();

ctx.closePath();

ctx.beginPath();

ctx.arc(

tabParticles[i].positionX,

tabParticles[i].positionY,

tabParticles[i].diameter * 3,

0, 2 * Math.PI, false);

ctx.strokeStyle = 'gold';

ctx.stroke();

ctx.closePath();

}

ctx.restore();

}

window.requestAnimFrame = (function() {

return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

function(callback) {

window.setTimeout(callback, 1000 / 60);

};

})();

(function loop() {

update();

draw();

requestAnimFrame(loop);

})();