HTML怎么做成多彩背景,HTML5 彩色背景掉落

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var two = new Two({

type: Two.Types.canvas,

fullscreen: true,

autostart: true

}).appendTo(document.body);

var totalFrames = 72;

var colors = ['#33c09e', '#f0453d', '#c5953a'];

var index = 0;

var velocityScale = two.height / (totalFrames / (colors.length + 0.5));

var amount = Math.round(two.width / 50);

var points = _.map(_.range(amount), function(i) {

var pct = i / (amount - 1);

var x = 1.5 * two.width * pct - two.width / 4;

var y = -two.height / 4;

var a = new Two.Anchor(x, y);

a.step = getStep(i);

return a;

});

var backdrop = two.makeRectangle(two.width / 2, two.height / 2, two.width, two.height);

var paint = two.makeCurve(

[

new Two.Anchor(two.width * 1.25, -two.height / 4),

new Two.Anchor(-two.width * 0.25, -two.height / 4)

].concat(points)

);

backdrop.noStroke();

paint.noStroke().fill = colors[colors.length - 1];

paint.stroke = '#302f2a';

paint.linewidth = 50;

reset();

two.bind('update', function(frameCount) {

// setInterval(function() {

var outside = true;

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

var v = points[i];

v.y += v.step;

v.step *= 1.0125;

if (v.y < two.height * 1.33) {

outside = false;

}

}

if (outside) {

reset();

}

});

// }, 1000 / 24);

function reset() {

backdrop.fill = paint.fill;

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

var v = points[i];

v.y = 0;

v.step = getStep(i);

}

index = (index + 1) % colors.length;

paint.fill = colors[index];

paint.curved = Math.random() > 0.5;

}

function getStep(i) {

var n = Math.sin(Math.PI * i / amount);

var pct = 0.33 * n;

var ipct = 1 - pct;

return velocityScale * Math.random() * pct + velocityScale * ipct;

}

function mod(v, l) {

while (v < 0) {

v += l;

}

return v % l;

}