Canvas 分形树生成动画和绿叶点缀

Tree generator

canvas, tree

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.createElement('canvas');
canvas.style.position = 'absolute';
canvas.style.width = '100%';
canvas.style.height = '100%';
document.body.appendChild(canvas);
var resX = canvas.width = canvas.offsetWidth;
var resY = canvas.height = canvas.offsetHeight;
var ctx = canvas.getContext('2d');
var scale;
var d = 12;
var i = 15;
var running = false;

function start() {
    running = true;
    run(resX / 2, resY / 1, //x, y
        -Math.PI / 2, //angle
        1, //direction
        100); //t
}

requestAnimationFrame(function() {
        t--;
        next(x, y, angle, dir, t);
    });

}

function vecX(x, angle) {
    return Math.cos(angle) * x;
}

function vecY(y, angle) {
    return Math.sin(angle) * y;
}

function transform(x, y, angle) {
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);
    ctx.setTransform(cos, sin, -sin, cos, x, y);
}

function square(width) {
    ctx.fillStyle = "rgba(0, 0, 0, 1)";
    ctx.fillRect(-width / 2, -width / 2, width * 1.4, width);
}

function triangle(side, color) {
    var h = side * Math.sqrt(3) / 4;
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.moveTo(-side / 2, h);
    ctx.lineTo(side / 2, h);
    ctx.lineTo(0, -h);
    ctx.lineTo(0, -h);
    ctx.fill();
}

function leaf(x, y, angle, direction, t) {
    transform(x, y, angle + Math.PI / 2);
    triangle(15, "rgba(96, 225, 0, 1)");

run(x, y, angle, direction, t);
}

function line(x, y, angle, direction, t) {
    transform(x, y, angle);
    square(40 * scale);

run(
        x + vecX(45 * scale, angle),
        y + vecY(45 * scale, angle),
        angle,
        direction,
        t
    );

}

function curve1(x, y, angle, direction, t) {

transform(x, y, angle);
    square(36 * scale);

run(
        x + vecX(45 * scale, angle),
        y + vecY(45 * scale, angle),
        angle + direction * 9 * Math.PI / 180,
        direction,
        t
    );

}

function curve2(x, y, angle, direction, t) {

transform(x, y, angle);
    square(34 * scale);

run(
        x + vecX(45 * scale, angle),
        y + vecY(45 * scale, angle),
        angle + direction * 17 * Math.PI / 180,
        direction,
        t
    );

}

function divide(x, y, angle, direction, t) {
    transform(x, y, angle);
    square(34 * scale);

x += vecX(45 * scale, angle);
    y += vecY(45 * scale, angle);

run(x, y, angle, -direction, t);
    run(x, y, angle, direction, t);

}

function invert(x, y, angle, direction, t) {
    transform(x, y, angle);
    square(34 * scale);

x += vecX(45 * scale, angle);
    y += vecY(45 * scale, angle);
    run(x, y, angle, direction * -1, t);
}

function generate() {
    running = false;
    resX = canvas.width = canvas.offsetWidth;
    resY = canvas.height = canvas.offsetHeight;
    ctx.fillStyle = '#82837E';
    ctx.fillRect(0, 0, resX, resY * 0.1);
    ctx.fillRect(0, resY * 0.9, resX, resY * 0.1);
    requestAnimationFrame(start);
}

generate();

var gui = new dat.GUI();
gui.add(window, 'generate').name('generate');
gui.add(window, 'd', 10, 50).name('divide').onFinishChange(generate);
gui.add(window, 'i', 10, 50).name('invert').onFinishChange(generate);

编译

CSS

HTML

Tree generator

canvas, tree

编辑器支持Emmet

快捷键

Tree generator

canvas, tree

Canvas 大树枝干和绿叶生长动画

HTML5 Canvas自动生成树木和带景深感的森林

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：