Canvas 坠落的曳尾彩虹星

疑是银河落九天的意境

canvas，星

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var w = bc.width = fc.width = window.innerWidth,
    h = bc.height = fc.height = window.innerHeight,
    bctx = bc.getContext('2d'),
    fctx = fc.getContext('2d'),

size = [20, 60], //[min, max]
    shineDir = [.01, .02],
    angSpeed = [.01, .04],

stars = [],
    frame = (Math.random() * 360) | 0,
    pentaRadiant = Math.PI * 2 / 5;

function rand(ar) {
    return Math.random() * (ar[1] - ar[0]) + ar[0];
}

function Star() {
    this.size = rand(size);
    this.x = Math.random() * w;
    this.y = -this.size * 2;
    this.vy = this.size / 10;
    this.vx = Math.random() * 6 - 3;
    this.ay = this.size / 5000;
    this.shine = 0;
    this.shineDir = rand(shineDir);
    this.color = 'hsla(hue, 80%, brightness%, .8)'.replace('hue', frame % 360);
    this.rot = Math.random() * 2 * Math.PI;
    this.omega = rand(angSpeed);
    if (Math.random() < .5) this.omega *= -1;
}
Star.prototype.use = function() {
    this.x += this.vx;
    this.y += this.vy += this.ay;

var newShine = this.shine + this.shineDir;
    if (newShine < 0 || newShine > 1) this.shineDir *= -1
    else this.shine = newShine;
    this.rot += this.omega;

bctx.translate(this.x, this.y);
    fctx.translate(this.x, this.y);
    bctx.rotate(this.rot);
    fctx.rotate(this.rot);
    bctx.fillStyle = fctx.fillStyle = this.color.replace('brightness', (.25 + this.shine / 2) * 100);
    fctx.beginPath();
    fctx.moveTo(this.size, 0);

for (var i = 0; i < 5; ++i) {
        var rad = pentaRadiant * i,
            halfRad = rad + pentaRadiant / 2;
        fctx.lineTo(Math.cos(rad) * this.size, Math.sin(rad) * this.size);
        bctx.fillRect(Math.cos(rad) * this.size, Math.sin(rad) * this.size, 2, 2);
        fctx.lineTo(Math.cos(halfRad) * this.size / 2, Math.sin(halfRad) * this.size / 2);
    }
    fctx.closePath();

fctx.fill();

fctx.rotate(-this.rot);
    bctx.rotate(-this.rot);
    fctx.translate(-this.x, -this.y);
    bctx.translate(-this.x, -this.y);
}

function anim() {
    window.requestAnimationFrame(anim);

++frame;

bctx.fillStyle = 'rgba(0, 0, 0, .04)';
    bctx.fillRect(0, 0, w, h);
    fctx.clearRect(0, 0, w, h);

if (Math.random() < .1) stars.push(new Star);

for (var s = 0; s < stars.length; ++s) {
        stars[s].use();

if (stars[s].x + stars[s].size < 0) {
            stars.splice(s, 1);
            --s;
        }
    }
}
anim();

编译

CSS

HTML

疑是银河落九天的意境

canvas，星

编辑器支持Emmet

快捷键

疑是银河落九天的意境

canvas，星

Canvas 掉落的彩色彗星

Canvas 无尽的星际

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：