HTML5 Canvas星空|星域背景图生成器

starfield generator

h5, star, space

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 4989
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

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

编译

CSS

HTML

starfield generator

h5, star, space

编辑器支持Emmet

快捷键

starfield generator

h5, star, space

HTML5 Canvas随机生成入侵者像素小怪物图标

HTML5 Canvas滤镜特效示例 - 带模糊光晕背景的五角星粒子动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：