变化各种漂亮图案（万花筒）的CANVAS动画

在CANVAS中实现随机有序的动效变换 - 类似万花筒效果。

h5, CANVAS

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var c = document.getElementById('canv'),
    $ = c.getContext('2d'),
    w = c.width = window.innerWidth,
    h = c.height = window.innerHeight,
    t = 0,
    num = 950,
    s, a, b, u = 0,
    x, y, _x, _y,
    _t = 1 / 16;

function random(min, max) {
    return Math.random() * (max - min) + min;
}

window.addEventListener('resize', function() {
    c.width = w = window.innerWidth;
    c.height = h = window.innerHeight;
}, false);

var canvas, ctx, tim;
canvas = document.getElementsByTagName('canvas')[0];
ctx = canvas.getContext('2d');
canvas.width = canvas.height = 400;
baum();

function baum() {
    var a, b, c, d, e, x, y, r;
    ctx.globalCompositeOperation = "source-over";
    ctx.fillStyle = "hsla(26,100%,0%,1)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.globalCompositeOperation = "color-burn";
    tim = new Date().getTime() / Math.PI / 72;

c = [];
    r = tim / 32;
    for (a = 0; a < 18; a++) {
        b = 160;
        if (a % 2 == 1) b = 100;
        x = Math.cos(r) * b;
        y = Math.sin(r) * b;
        c.push([200 + x, 200 + y]);
        r += Math.PI * 2 / 14;
    }

for (a = 0; a < 7; a++) {
        b = c[a * 2];
        d = c[a * 2 + 1];
        e = c[(a * 2 + 13) % 14];
        tri([
            [200, 200], b, d
        ], 0);
        tri([
            [200, 200], b, e
        ], 0);
    }
    requestAnimationFrame(baum);
}

function tri(p, ban) {
    var a, b, c, d, e, f, x, y, han, r1, r2;
    x = y = 0;
    for (a = 0; a < 3; a++) {
        x += p[a][0];
        y += p[a][1];
    }
    x = x / 3 - canvas.width / 2;
    y = y / 3 - canvas.height / 2;
    han = Math.pow(x * x + y * y, 0.5);
    c = 0.2 + Math.sin(tim / 13) * 0.15;
    r1 = 0.5 + Math.sin(han / 20 * (1 + Math.sin(tim / 19) * 0.7) + tim / 41) * c;
    r2 = 1 - r1;
    c = p[0][0] * (p[1][1] - p[2][1]);
    c += p[1][0] * (p[2][1] - p[0][1]);
    c += p[2][0] * (p[0][1] - p[1][1]);
    c = Math.abs(c);

if (c < 100) {
        if (ban % 17 == 1) {
            a = ((han + tim * 3) % 360) | 0;
            b = 0.4;
            if (ban % 12 > 8) b = 1;

ctx.fillStyle = ctx.strokeStyle = "hsla(" + a * 2 + ",60%,40%,0.53)";
            ctx.beginPath();
            for (a = 0; a < p.length; a++) {
                b = p[a];
                ctx.globalCompositeOperation = "lighter";
                ctx.lineTo(b[0], b[1]);
            }
            ctx.fill();
            if (Math.random() < 0.2) return;
        }
        if (ban % 50 > 28) return;
        if (c < 20) return;
    }

d = 0;
    for (a = 0; a < p.length; a++) {
        b = p[a];
        c = p[(a + 1) % p.length];
        x = b[0] - c[0];
        y = b[1] - c[1];
        e = Math.pow(x * x + y * y, 0.5);
        if (e > d) {
            d = e;
            f = a;
        }
    }

a = p[f];
    b = p[(f + 1) % p.length];
    c = p[(f + 2) % p.length];
    x = a[0] * r1 + b[0] * r2;
    y = a[1] * r1 + b[1] * r2;
    tri([b, c, [x, y]], ban + 1);
    tri([c, a, [x, y]], ban + 2);
}

编译

CSS

HTML

在CANVAS中实现随机有序的动效变换 - 类似万花筒效果。

h5, CANVAS

编辑器支持Emmet

快捷键

在CANVAS中实现随机有序的动效变换 - 类似万花筒效果。

h5, CANVAS

SVG CSS3恐怖而惊艳的脸皮融化（面膜剥落）动画

CANVAS 秋季感觉的雨伞飘落动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：