Canvas 圆形内切运动构成的美丽图案

Inscribed Motion

canvas，运动

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

第三方库
作品简介 2925
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

var c = document.getElementById("canv"),
    $ = c.getContext("2d"),
    w = c.width = window.innerWidth;
h = c.height = window.innerHeight;
_w = w / 2,
    _c = document.getElementsByTagName("canvas")[1],
    $$ = _c.getContext("2d"),
    _PI = Math.PI * 2,
    draw = new Draw(w / 2, h / 2 - 100);

_c.width = _c.height = w;
$$.fillStyle = "hsla(0,5%,5%,1)";
$$.fillRect(0, 0, w, h);

function Draw(x, y) {
    this.x = x;
    this.y = y;
    this.num = 3;
    this.radi = [50, 150, 220];
    this.t = [Math.random() * _PI,
        Math.random() * _PI,
        Math.random() * _PI
    ];
    this.t_ = [Math.random() * 0.2 - 0.1,
        Math.random() * 0.2 - 0.1,
        Math.random() * 0.2 - 0.1
    ];
}
Draw.prototype.draw = function() {
    $$.shadowColor = 'hsla(47, 25%, 5%, 1)';
    $$.shadowBlur = 25;
    $$.shadowOffsetX = 15;
    $$.shadowOffsetY = 15;
    $$.strokeStyle = 'hsla(47, 95%, 45%, .2)';

for (var i = 0; i < this.num; i++) {
        var x = this.x + this.radi[i] * Math.cos(this.t[i]),
            y = this.y + this.radi[i] * Math.sin(this.t[i]);

if (i == 0) {
            $$.beginPath();
            $$.moveTo(x, y);
        } else {
            $$.lineTo(x, y);
        }
        $.shadowColor = 'hsla(47, 25%, 5%, 1)';
        $.shadowBlur = 25;
        $.shadowOffsetX = 15;
        $.shadowOffsetY = 15;
        $.strokeStyle = "#";
        $.fillStyle = "hsla(47, 80%, 45%, 1)"
        $.beginPath();
        $.arc(this.x, this.y, this.radi[i], 0, _PI, false);
        $.stroke();

$.beginPath();
        $.arc(x, y, 8, 0, _PI, false);
        $.fill();
        this.t[i] += this.t_[i];
    }
    $$.closePath();
    $$.stroke();
};
run();

function run() {
    $.drawImage(_c, 0, 0);
    draw.draw();
    window.requestAnimFrame(run);
};

编译

CSS

HTML

Inscribed Motion

canvas，运动

编辑器支持Emmet

快捷键

Inscribed Motion

canvas，运动

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：