Canvas 掉落的彩色彗星

有拖尾效果的五角星

canvas，星

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    ctx = c.getContext('2d'),

size = [20, 60], //[min, max]
    shineDir = [.01, .05],
    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%, .15)'.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;

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

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

ctx.fill();

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

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

++frame;

ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = 'rgba(0, 0, 0, .1)';
    ctx.fillRect(0, 0, w, h);
    ctx.globalCompositeOperation = 'lighter';

if (Math.random() < .3) 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

快捷键

语言：

语言：

导入代码模板：