绘制彩虹html代码,HTML5 Canvas 彩虹螺旋图生成器

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

$(function() {

var myCanvas, context, width, height;

var lines = [],

numberOfLines = 12;

var colours = ['#FFD800', '#FF6A00', '#FF0000', '#0094FF', '#0026FF', '#4800FF', '#7FFF8E', '#B6FF00', '#4CFF00', '#FFFFFF'];

var Line = function() {

return {

x: 0,

y: 0,

size: 4,

colour: '#FFFFFF',

distance: 1,

speed: 30,

increment: 0.8,

turn: 45,

wobble: 7,

rotation: random(0, 359),

randomVariance: 0,

opacity: 0.5,

clockwise: true,

glow: true,

interval: {},

tick: function() {

var oldX = this.x;

var oldY = this.y;

// Random wander

if (this.randomVariance) {

this.x += random((-1 * this.randomVariance) * this.distance, this.randomVariance * this.distance);

this.y += random((-1 * this.randomVariance) * this.distance, this.randomVariance * this.distance);

}

if (this.clockwise)

this.rotation -= this.turn;

else

this.rotation += this.turn;

// Wobble (point at which lines bend sharply)

if (this.wobble) {

if (this.rotation < 0) this.rotation += this.wobble;

if (this.rotation >= this.wobble) this.rotation -= this.wobble;

}

this.x = this.x + this.distance * Math.sin(this.rotation);

this.y = this.y + this.distance * Math.cos(this.rotation);

if (this.glow) {

drawLine(oldX, oldY, this.x, this.y, this.size * 6, this.colour, 0.03);

drawLine(oldX, oldY, this.x, this.y, this.size * 4, this.colour, 0.05);

}

drawLine(oldX, oldY, this.x, this.y, this.size, this.colour, this.opacity);

this.distance += this.increment;

return this;

},

init: function(details) {

for (var x in details) {

this[x] = details[x];

}

var self = this;

this.interval = setInterval(function() {

self.tick();

}, this.speed);

return this;

},

stop: function() {

clearInterval(this.interval);

}

};

};

if ($("canvas").length > 0) {

myCanvas = $("#canvas")[0];

context = myCanvas.getContext("2d");

resizeCanvas();

eventListeners();

startAnimation();

}

function resizeCanvas() {

myCanvas.width = $("canvas").width();

myCanvas.height = $("canvas").height();

width = myCanvas.width;

height = myCanvas.height;

}

$(window).on('resize', resizeCanvas);

function eventListeners() {

$('#submit').on('click', function() {

var options = {};

$('#controls input[type="text"]').each(function() {

options[$(this).attr('id')] = checkNumber($(this).val());

});

numberOfLines = options.numberOfLines;

var shareString = '';

for (var x in options) {

shareString += options[x] + '|';

}

$('#sharecode').val(shareString);

startAnimation(options);

return false;

});

$('#random').on('click', function() {

randomSettings();

});

$('#hide').on('click', function() {

$('#controls').hide();

});

$('#sharecode')

.on('paste', function() {

setTimeout(function() {

var shareString = $('#sharecode').val().split('|');

$('#controls input[type="text"]').not('#sharecode').each(function(x) {

$(this).val(shareString[x]);

});

$('#submit').trigger('click');

}, 100);

})

.on('focus', function() {

$(this).select();

});

}

function randomSettings() {

var settings = {

numberOfLines: random(2, 12),

size: random(1, 10),

distance: random(1, 30),

speed: random(2, 6) * 10,

increment: random(1, 10) / 10,

turn: random(1, 200),

wobble: random(1, 400),

opacity: random(3, 10) / 10

};

for (var x in settings) {

$('#' + x).val(settings[x]);

}

$('#submit').trigger('click');

}

function startAnimation(options) {

options = options ? options : {};

options.x = width / 2;

options.y = height / 2;

context.clearRect(0, 0, width, height);

for (var x = 0; x < lines.length; x++) {

lines[x].stop();

}

lines = [];

for (var y = 0; y < numberOfLines; y++) {

options.colour = colours[random(0, colours.length - 1)];

options.rotation = (360 / numberOfLines) * y;

lines.push(

Line().init(options)

);

}

}

function drawPoint(x, y, size, colour) {

context.fillStyle = colour;

context.fillRect(x, y, size, size);

}

function drawLine(x1, y1, x2, y2, size, colour, opacity) {

setOpacity(opacity);

context.beginPath();

context.strokeStyle = colour;

context.lineWidth = size;

context.moveTo(x1, y1);

context.lineTo(x2, y2);

context.stroke();

context.closePath();

}

function setOpacity(alpha) {

context.globalAlpha = alpha;

}

function random(min, max) {

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

}

function checkNumber(n) {

n = parseFloat(n);

if (isNaN(n) || n < 0) n = 0;

return n;

}

});