canvas 线条渐变追逐_Canvas 随机线条运动和颜色渐变

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

;

(function() {

"use strict";

var DAMPING = .999;

function Particle(x, y) {

this.x = this.oldX = x;

this.y = this.oldY = y;

}

Particle.prototype = {

integrate: function() {

// 1. looks old and new positions of a Particle, calculating the velocity

// 2. then updates old and new positions with the velocity

var velocityX = (this.x - this.oldX) * DAMPING;

var velocityY = (this.y - this.oldY) * DAMPING;

this.oldX = this.x;

this.oldY = this.y;

this.x += velocityX;

this.y += velocityY;

},

attract: function(x, y) {

// calulates the distance b/w a Particle and the Square

// then lightly pulls the Particle towards the Square

var dx = x - this.x;

var dy = y - this.y;

var distance = .75 * Math.sqrt(dx * dx + dy * dy);

this.x += dx / distance;

this.y += dy / distance;

},

draw: function() {

ctx.strokeStyle = '#ffffff';

ctx.lineWidth = 2;

ctx.beginPath();

ctx.moveTo(this.oldX, this.oldY);

ctx.lineTo(this.x, this.y);

ctx.stroke();

}

}

function randomBase16() {

var r = Math.round(Math.random() * 255).toString(16);

(r.length < 1) && (r = '0' + r);

return r;

}

function randomRGB() {

var hex = "#" + [

randomBase16(),

randomBase16(),

randomBase16()

].join('');

return hex;

}

function Square(x, y) {

x = x || 0;

y = y || 0;

this.coords = {

x: x,

y: y

}

this.velocity = {

x: 4,

y: 20

}

this.size = {

x: 50,

y: 50

}

this.color = randomRGB();

var self = this;

this.particles = new Array(20).join(',').split(',').map(function() {

return new Particle(x + Math.random() * self.size.x, y + Math.random() * self.size.y)

});

}

Square.prototype = {

draw: function() {

ctx.fillStyle = this.color;

ctx.fillRect(this.coords.x, this.coords.y, this.size.x, this.size.y);

var self = this;

this.particles.forEach(function(p) {

p.attract(self.coords.x, self.coords.y);

p.integrate();

p.draw();

})

},

update: function(size) {

this.coords.x += this.velocity.x;

this.coords.y += this.velocity.y;

if (this.coords.x > size.x || this.coords.x < 0) {

this.velocity.x *= -1;

this.color = randomRGB();

color = randomRGB();

}

if (this.coords.y > size.y || this.coords.y < 0) {

this.velocity.y *= -1;

this.color = randomRGB();

color = randomRGB();

}

}

}

var color = randomRGB(),

ctx,

size;

function Sim() {

var c = document.querySelector("#c"),

self = this;

ctx = c.getContext("2d")

c.width = c.offsetWidth;

c.height = c.offsetHeight;

function setSize() {

size = {

x: c.width,

y: c.height

};

}

window.addEventListener('resize', setSize);

window.addEventListener('orientationChange', setSize);

setSize();

this.items = [new Square()];

function tick() {

self.update(size);

self.draw(size);

requestAnimationFrame(tick);

}

tick();

}

Sim.prototype = {

update: function() {

// process everything

this.items.forEach(function(i) {

i.update(size);

})

},

draw: function() {

// draw black

ctx.fillStyle = color;

ctx.globalAlpha = .05;

ctx.fillRect(0, 0, size.x, size.y)

ctx.globalAlpha = 1;

// draw everything

this.items.forEach(function(i) {

i.draw(ctx);

})

}

}

window.onload = function() {

new Sim;

};

})();