HTML5浩瀚银河系星空图

HTML5 Canvas全屏背景动画 - 星空

h5, canvas, star

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<!DOCTYPE html>
<html>

<head>
        <meta charset="utf-8">
        <title>HTML5 Canvas全屏背景动画</title>
        <style>
            body {
                background: #060e1b;
                overflow: hidden;
            }
            .codrops-demos {
                font-size: 0.8em;
                text-align: center;
                position: absolute;
                z-index: 99;
                width: 96%;
            }
            .codrops-demos a {
                display: inline-block;
                margin: 0.35em 0.1em;
                padding: 0.5em 1.2em;
                outline: none;
                text-decoration: none;
                text-transform: uppercase;
                letter-spacing: 1px;
                font-weight: 700;
                border-radius: 2px;
                font-size: 110%;
                border: 2px solid transparent;
                color: #fff;
            }
            .codrops-demos a:hover,
            .codrops-demos a.current-demo {
                border-color: #383a3c;
            }
        </style>
    </head>

<body>
        <canvas id="canvas"></canvas>
        <script>
            "use strict";
            var canvas = document.getElementById('canvas'),
                ctx = canvas.getContext('2d'),
                w = canvas.width = window.innerWidth,
                h = canvas.height = window.innerHeight,
                hue = 217,
                stars = [],
                count = 0,
                maxStars = 1400;
            var canvas2 = document.createElement('canvas'),
                ctx2 = canvas2.getContext('2d');
            canvas2.width = 100;
            canvas2.height = 100;
            var half = canvas2.width / 2,
                gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
            gradient2.addColorStop(0.025, '#fff');
            gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
            gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
            gradient2.addColorStop(1, 'transparent');
            ctx2.fillStyle = gradient2;
            ctx2.beginPath();
            ctx2.arc(half, half, half, 0, Math.PI * 2);
            ctx2.fill();
            // End cache
            function random(min, max) {
                if (arguments.length < 2) {
                    max = min;
                    min = 0;
                }
                if (min > max) {
                    var hold = max;
                    max = min;
                    min = hold;
                }
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
            var Star = function() {
                this.orbitRadius = random(w / 2 - 50);
                this.radius = random(100, this.orbitRadius) / 10;
                this.orbitX = w / 2;
                this.orbitY = h / 2;
                this.timePassed = random(0, maxStars);
                this.speed = random(this.orbitRadius) / 900000;
                this.alpha = random(2, 10) / 10;
                count++;
                stars[count] = this;
            }
            Star.prototype.draw = function() {
                var x = Math.sin(this.timePassed + 1) * this.orbitRadius + this.orbitX,
                    y = Math.cos(this.timePassed) * this.orbitRadius / 2 + this.orbitY,
                    twinkle = random(10);
                if (twinkle === 1 && this.alpha > 0) {
                    this.alpha -= 0.05;
                } else if (twinkle === 2 && this.alpha < 1) {
                    this.alpha += 0.05;
                }
                ctx.globalAlpha = this.alpha;
                ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
                this.timePassed += this.speed;
            }
            for (var i = 0; i < maxStars; i++) {
                new Star();
            }

function animation() {
                ctx.globalCompositeOperation = 'source-over';
                ctx.globalAlpha = 0.8;
                ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
                ctx.fillRect(0, 0, w, h)
                ctx.globalCompositeOperation = 'lighter';
                for (var i = 1, l = stars.length; i < l; i++) {
                    stars[i].draw();
                };
                window.requestAnimationFrame(animation);
            }
            animation();
        </script>
    </body>

</html>

HTML5 Canvas全屏背景动画 - 星空

h5, canvas, star

编辑器支持Emmet

快捷键

HTML5 Canvas全屏背景动画 - 星空

h5, canvas, star

HTML5 CSS3绚烂的星空

使用P5.js和HTML5实现的太空小行星射击游戏

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：