HTML5奇怪的波动指环

Wavy Ring, 边缘起伏不定的柔性戒指。

html5, ring

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

'use strict';

// Hacks abound. Beware!
var C_FG = [134, 153, 209];
var C_BG = [219, 169, 206];
var C_DOT = [71, 209, 213];
var SIZE = 540;
var N = 6;
var D = SIZE / 7;
var W = SIZE / 2 - SIZE / 10;
var H = SIZE / 10;
var MAGNITUDE = H / 3;
var DAMPING = 60;

var simplex = new SimplexNoise();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

// Create our pattern.
canvas.height = canvas.width = 16;
ctx.fillStyle = 'rgb(' + C_FG + ')';
ctx.fillRect(0, 0, 16, 16);
ctx.fillStyle = 'rgb(' + C_DOT + ')';
ctx.arc(8, 8, 2, 0, 2 * Math.PI);
ctx.fill();
var pattern = ctx.createPattern(canvas, 'repeat');

// Stretch our canvas to the proper size & color.
canvas.height = canvas.width = SIZE;
canvas.style.height = canvas.style.width = SIZE / 2 + 'px';
ctx.transform(1, 0, 0, -1, SIZE / 2, SIZE / 2);
ctx.strokeStyle = '#000';
ctx.lineWidth = 4;
ctx.lineCap = ctx.lineJoin = 'round';
ctx.fillStyle = 'rgb(' + C_BG + ')';
ctx.fillRect(-SIZE / 2, -SIZE / 2, SIZE, SIZE);
ctx.fillStyle = 'rgba(' + C_BG + ', 0.1)';

// Util functions for getting y components.
var circle = function circle(x) {
    return Math.sqrt((1 - x * x / W / W) * D * D);
};
var noise = function noise(x, y, t) {
    return MAGNITUDE * (1 + simplex.noise3D(x / DAMPING, y / DAMPING, 3 * t / DAMPING / DAMPING));
};

// Go for it.
! function step(t) {
    ctx.fillRect(-SIZE / 2, -SIZE / 2, SIZE, SIZE);
    ctx.save();
    ctx.fillStyle = pattern;
    [1, -1].forEach(function(sign, isBottom) {
        var x0 = W * sign;
        var a0 = isBottom * Math.PI;
        var a1 = (isBottom - 1) * -Math.PI;
        for (var c = 0; c < N; ++c) {
            var o = isBottom ? N - 1 - c : c;
            var _O = 6 / (o + 6);
            var _W = W * _O;
            var _D = D * _O;

ctx.beginPath();
            ctx.ellipse(0, -H / 2, _W, _D, 0, a0, a1);
            for (var i = -_W; i <= _W; ++i) {
                var x = sign * i;
                var y = (H / 2 + sign * circle(i / _O)) * _O;
                ctx.lineTo(x, y + noise(x, y, t));
            }
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
        }
    });
    ctx.beginPath();
    ctx.moveTo(-W, -H);
    ctx.lineTo(-W, 0);
    ctx.moveTo(W, -H);
    ctx.lineTo(W, 0);
    ctx.stroke();

ctx.beginPath();
    ctx.ellipse(0, -H, W, D, 0, Math.PI, 0);
    for (var i = W; i >= -W; --i) {
        var x = i;
        var y = -H * 2 - circle(i);
        ctx.lineTo(x, y - noise(x, y, t));
    }
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
    ctx.restore();
    window.requestAnimationFrame(step);
}(0);

document.body.style.background = 'rgb(' + C_BG + ')';
document.body.appendChild(canvas);

编译

CSS

HTML

// Typed array .fill polyfill
    if (typeof Uint16Array.prototype.fill !== 'function') {
        Uint16Array.prototype.fill = function(value) {
            var i = this.length;
            while (i--) {
                this[i] = value;
            }
        }
    }
</script>

Wavy Ring, 边缘起伏不定的柔性戒指。

html5, ring

编辑器支持Emmet

快捷键

Wavy Ring, 边缘起伏不定的柔性戒指。

html5, ring

HTML5光怪陆离的文本动画特效

HTML5渐变色波动背景的菱形导航菜单

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：