html直线动画,HTML5 Canvas使用许多直线绘制曲线动画

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

// Create Canvas.

var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

// Store all particles.

var particles = [];

// The default colorset.

// Configure settings options

var config = {};

var settings = document.getElementById('settings');

initSettings();

// Init.

resize();

// Fire the Go! button.

settings.btnSet.onclick();

// Attach canvas.

document.body.appendChild(canvas);

// Begin drawing.

window.requestAnimationFrame(draw);

// Sync canvas to window.

window.onresize = resize;

function createBall(angle) {

var n = 1;

var origin = [

canvas.width / 2,

canvas.height / 2

]

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

particles.push(new particle({

angle: angle,

pos: [origin[0], origin[1]],

size: config.size,

speed: config.speed,

index: i

}));

}

}

function start(delay) {

clear();

config.toCreate = config.num;

}

// Drawing.

var tick = 0;

function draw() {

for (var i = 0; i < particles.length; i++) {

var p = particles[i];

p.move();

p.draw(ctx);

}

fade();

window.requestAnimationFrame(draw);

if (config.toCreate) {

if (!(tick % (config.delay))) {

createBall((180 / config.num) * config.toCreate);

config.toCreate--;

}

}

tick++;

}

function particle(options) {

this.angle = 0;

this.curve = 0;

this.pos = [0, 0];

this.size = 100;

this.speed = 1;

this.tick = 0;

this.color = 'rgba(255,64,64,.95)';

this.hue = 0;

this.waveX = false;

this.waveY = false;

this.index = 0;

// Override defaults.

for (var i in options) {

this[i] = options[i];

}

this.move = function() {

this.angle += this.curve;

var radians = this.angle * Math.PI / 180;

this.pos[0] += Math.cos(radians) * this.speed * Math.cos(this.tick / 50),

this.pos[1] += Math.sin(radians) * this.speed * Math.cos(this.tick / 50);

this.hue++

this.color = 'hsl(' + this.hue + ', 80%, 65%)';

this.tick++;

}

this.draw = function(ctx) {

ctx.strokeStyle = this.color;

ctx.beginPath();

ctx.arc(this.pos[0], this.pos[1], this.size, 0, 2 * Math.PI);

ctx.stroke();

}

}

function preset(options) {

for (var i in options) {

if (settings[i].type == 'checkbox') {

settings[i].checked = options[i];

continue;

}

settings[i].value = options[i];

}

clear();

settings.btnSet.onclick();

}

function fade() {

ctx.beginPath();

ctx.fillStyle = 'rgba(0, 0, 0, .03)';

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fill();

}

function clear() {

ctx.beginPath();

ctx.fillStyle = 'rgba(0, 0, 0, 1)';

ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.fill();

particles.length = 0;

}

function resize() {

canvas.width = window.innerWidth;

canvas.height = window.innerHeight;

}

/* Common functions */

function rand(min, max) {

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

}

function randColor(min, max) {

var r = Math.floor(rand(min, max)),

g = Math.floor(rand(min, max)),

b = Math.floor(rand(min, max));

return 'rgba(' + r + ',' + g + ',' + b + ',1)';

}

// Settings

function preset(options) {

for (var i in options) {

settings[i].value = options[i];

}

settings.btnSet.onclick();

}

function initSettings() {

settings.btnSet.onclick = function() {

config.num = parseInt(settings.inNum.value);

config.size = parseInt(settings.inSize.value);

config.speed = parseInt(settings.inSpeed.value);

config.delay = parseInt(settings.inDelay.value);

start(config.delay);

}

// Presets.

settings.preset0.onclick = function() {

preset({

inNum: 20,

inSize: 20,

inSpeed: 5,

inDelay: 8

});

}

settings.preset1.onclick = function() {

preset({

inNum: 184,

inSize: 10,

inSpeed: 5,

inDelay: 6

});

}

settings.preset2.onclick = function() {

preset({

inNum: 79,

inSize: 10,

inSpeed: 5,

inDelay: 6

});

}

settings.preset3.onclick = function() {

preset({

inNum: 20,

inSize: 30,

inSpeed: 10,

inDelay: 3

});

}

settings.preset4.onclick = function() {

preset({

inNum: 80,

inSize: 2,

inSpeed: 20,

inDelay: 1

});

}

}