Canvas 色彩变幻的林木造型艺术

topiary，摆动的树动画模型。

Canvas，模型

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

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

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');
var $ = c.getContext('2d');
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var w2 = w * 0.5;
var h2 = h * 0.5;
var ŭ = 0;
var topiary = new branch(80, 0, 0);
var cnt = 0;

function anim() {
    cnt++;
    ŭ -= .5;
    if (cnt % 2) {
        draw();
    }
    window.requestAnimFrame(anim);
}
anim();

function draw() {
    $.save();
    $.clearRect(0, 0, w, h);
    $.translate(w2, h * 0.98);
    $.rotate(-Math.PI * 0.5);
    topiary.disp($);
    $.restore();
}

function branch(len, ang, gen) {
    this.len = len;
    this.ang = ang;
    this.gen = gen;
    this.limb = [];
    this.cntr = 0;
    this.mult = rnd(0.01, 0.1);
    this.spawn = 0;
    this.vel = 0;

if (gen < 10) {
        this.limb.push(new branch(len * rnd(0.8, 0.99),
            rnd(0, Math.PI / 6), this.gen + 1));
        this.limb.push(new branch(len * rnd(0.8, 0.99),
            rnd(0, -Math.PI / 6), this.gen + 1));
    }

this.disp = function($) {
        this.cntr++;
        $.save();
        this.vel *= 0.9;
        var dif = 1 - this.spawn;
        this.vel += (dif * 0.1);
        this.spawn += this.vel;

$.strokeStyle = "hsla(" + (ŭ % 360) + ",100%,50%,1)";
        $.lineWidth = 1;
        $.beginPath();
        $.rotate(this.ang + (Math.sin(this.cntr * this.mult) * Math.PI / 128));
        $.moveTo(0, 0);
        $.lineTo(this.len * this.spawn, 0);
        $.stroke();

$.translate(this.len * this.spawn, 0);

if (this.spawn > 0.6) {
            for (var i = 0; i < this.limb.length; i++) {
                var limb = this.limb[i];
                limb.disp($);
            }
        }
        $.restore();
    };
}

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

编译

CSS

HTML

topiary，摆动的树动画模型。

Canvas，模型

编辑器支持Emmet

快捷键

topiary，摆动的树动画模型。

Canvas，模型

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：