HTML5/Canvas演示圆形构造原理的动画

圆形可以被看作是无限细分的多边形，而历史上圆周率的计算值也是通过内接（外接）多边形的方法来逼近的。

html5, math

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var c = document.getElementById('c'),
    ctx = c.getContext('2d');

// Duration in ms
var dur = 3000;
// Parts duration in [0,1] (e.g. .65 = 65% of the animation in the square to circle transition, and 35% in the circle to square transition)
var split = .65;
// Radius in px (also half the square side length)
var size = 90;

// Set up the canvas
ctx.fillStyle = '#ccc';
// Coordinates relative to the center
ctx.translate(c.width * .5, c.height * .5);

// Scale down easing during the square to circle transition
function scaleEasing(t) {
        return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
    }
    // Corners easing during the circle to square transition
function circleEasing(t) {
    var sep = .3,
        vsep = .25;
    if (t < sep) {
        return ((t /= sep) * t * t * t) * vsep;
    } else t = (t - sep) / (1 - sep);
    return vsep + (1 - vsep) * (Math.sin(-13 * (t + 1) * Math.PI * .5) * Math.pow(2, -10 * t) + 1);
}

// Draw a square centered around a point
function fillRect(px, py, s, scale) {
    if (scale !== 0 && !scale) scale = 1; // Not specified == 1
    if (scale !== 1) {
        s *= scale;
        px *= scale;
        py *= scale;
    }
    ctx.fillRect(px - s, py - s, 2 * s, 2 * s);
}
var withSquares = (function() {
    function getDelay(n) {
        return (1 - 1 / (n + 1));
    }

function recurs(size, v, limit, p, q, n) {
        // Compute the size of the current square
        var factors = q ? [32, -16, -16, 64] : [0, 0, -4, 40];
        var div = q ? 16 : 10;
        var delta = [q * p, q * q, p * p, 1].reduce((t, v, i) => t + v * factors[i], 0);
        var s = (Math.sqrt(delta) - 4 * (p + q)) / div,
            fs = s;

// Compute the actual drawn size (progressively gets bigger)
        var x = (p + s),
            y = q && (q + s);
        var d = Math.sqrt(x * x + y * y);
        var delay = getDelay(n);
        var dur = getDelay(n + 4) - delay;
        var w = Math.max(v - delay, 0) / (dur) * Math.SQRT2;
        if (d > w) fs *= w / d;

// ctx.fillStyle = 'hsl('+ (n * 47) +', 75%, 60%)';
        // Draw the 4 or 8 corresponding squares
        for (var i = 0, l = (q ? 0b1000 : 0b100); i < l; i++) {
            var args = [
                (p + fs) * ((i >> 1) & 1 ? 1 : -1),
                q && ((q + fs) * ((i >> 2) & 1 ? 1 : -1))
            ];
            fillRect(args[i & 1], args[1 - (i & 1)], fs, size);
        }
        // If the square is big enough, continue
        if (s > limit) {
            recurs(size, v, limit, p + 2 * s, q, n + 1);
            recurs(size, v, limit, p, q ? q + 2 * s : s, n + 1);
        }
    }
    return function(size, v, limit) {
        fillRect(0, 0, 1, size);
        recurs(size, v, limit, 1, 0, 0);
    };
})();

function fillCircle(px, py, s) {
    ctx.beginPath();
    ctx.arc(px, py, s, 0, 2 * Math.PI, false);
    ctx.fill();
}

function withCircles(size, v) {
    fillCircle(0, 0, size);
    ctx.beginPath();
    for (var i = 0; i < 8; i++) {
        var a = i * Math.PI * .25;
        var d = size * (i & 1 ? 1 + v * (Math.SQRT2 - 1) : 1);
        ctx.lineTo(d * Math.cos(a), d * Math.sin(a));
    }
    ctx.fill();
}

/* NO-BEAUTIFY */

编译

CSS

HTML

圆形可以被看作是无限细分的多边形，而历史上圆周率的计算值也是通过内接（外接）多边形的方法来逼近的。

html5, math

编辑器支持Emmet

快捷键

圆形可以被看作是无限细分的多边形，而历史上圆周率的计算值也是通过内接（外接）多边形的方法来逼近的。

html5, math

HTML5/Canvas 流动的变形圆形

HTML5 Canvas圆圈里面的三角形变换动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：