html5画布星空,HTML5 Canvas星空|星域背景图生成器

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);