JavaScript
语言：
JaveScriptBabelCoffeeScript
确定
console.clear();
var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
function rgba(triplet, opacity) {
var args = triplet.map(a => Math.round(Math.max(0, Math.min(a, 255))));
return `rgba(${args.join()},${opacity})`;
}
function gradient(opts) {
var gradient = ctx.createRadialGradient(opts.x, opts.y, opts.r, opts.x, opts.y, 0);
gradient.addColorStop(0, rgba(opts.color, 0));
gradient.addColorStop(1, rgba(opts.color, opts.opacity || 1));
ctx.fillStyle = gradient;
ctx.fillRect(opts.x - opts.r, opts.y - opts.r, opts.r * 2, opts.r * 2);
}
function makeCloud(opts) {
let colors = opts.colors || [
[255, 255, 255]
];
var cycle = 0;
for (let i = 0; i < 20; i++) {
var intensity = Math.random() / 2 + 0.5;
var width = (Math.random() / 2 + 0.5) * (Math.min(opts.w, opts.h) / 3);
let theseColors = colors[cycle++].map(c => c * intensity);
if (cycle >= colors.length) cycle = 0;
var x = (opts.w - width * 2) * Math.random() + width + opts.x - opts.w / 2;
var y = (opts.h - width * 2) * Math.random() + width / 2 + opts.x - opts.h / 2;
gradient({
color: theseColors,
opacity: Math.random() * (opts.maxOpacity || 1),
r: width,
x: x,
y: y,
})
}
}
function star(opts) {
gradient({
x: opts.x,
y: opts.y,
r: opts.r * 8 * Math.random(),
color: opts.color,
opacity: opts.opacity * 0.1,
});
gradient({
x: opts.x,
y: opts.y,
r: opts.r * 4,
color: opts.color,
opacity: opts.opacity * 0.25,
});
gradient({
x: opts.x,
y: opts.y,
r: opts.r,
color: opts.color,
opacity: opts.opacity,
});
}
function go() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let j = 0; j < 3; j++) {
makeCloud({
w: canvas.width * 2,
h: canvas.height * 2,
x: canvas.width / 2,
y: canvas.height / 2,
colors: [
[163, 0, 130],
[0, 100, 120],
[0, 100, 120],
],
maxOpacity: 0.1,
count: 10
});
for (let i = 0; i < 500; i++) {
star({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
r: Math.random(),
opacity: Math.random(),
color: [
200 + Math.random() * 55,
100 + Math.random() * 155,
200 + Math.random() * 55,
]
});
}
// stars that clump together
for (let k = 0; k < 3; k++) {
let x = Math.random() * canvas.width;
let y = Math.random() * canvas.height;
let dirX = Math.random() * 2 - 1;
let dirY = Math.random() * 2 - 1;
let fudge = canvas.width / 30;
for (let i = 0; i < 1000; i++) {
star({
x: x += ((Math.random() - .5) * fudge + dirX),
y: y += ((Math.random() - .5) * fudge + dirY),
r: Math.random() * 1,
opacity: Math.random(),
color: [
200 + Math.random() * 55,
100 + Math.random() * 155,
200 + Math.random() * 55,
]
});
}
for (let i = 0; i < Math.random() * 8 + 4; i++) {
star({
x: x += ((Math.random() - .5) * fudge * fudge),
y: y += ((Math.random() - .5) * fudge * fudge),
r: Math.random() * 4 + 2,
opacity: 1,
color: [
200 + Math.random() * 55,
100 + Math.random() * 155,
200 + Math.random() * 55,
]
});
}
}
}
}
go();
document.querySelector('button').addEventListener('click', go);
