Canvas 神奇的变形智慧树

Tree，Trunk，Branch 可拖拉来缩放或变形。

Canvas

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.getElementById("draw");
var ctx = canvas.getContext("2d");

var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H * 2;

document.oncontextmenu = function() {
    return false;
};

function translate(value, leftMin, leftMax, rightMin, rightMax) {
    var leftSpan = leftMax - leftMin;
    var rightSpan = rightMax - rightMin;

var scaled = (value - leftMin) / leftSpan;
    return rightMin + scaled * rightSpan;
}

function branch(x, y, length, angle, line_width, delayer, level) {
    var toX;
    var toY;
    var branchAngles;
    var i;

if (level >= config.levels) {
        return;
    }

toX = x + length * Math.cos(angle * Math.PI / 180);
    toY = y + length * Math.sin(angle * Math.PI / 180);

ctx.lineWidth = line_width;
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(toX, toY);
    ctx.stroke();

branchAngles = [];
    for (i = 0; i < config.branches; i++) {
        branchAngles[i] = translate(i, 0, config.branches - 1, -1, 1);
    }

for (i = 0; i < branchAngles.length; i++) {
        (function() {
            var branchAngle = angle + branchAngles[i] * config.angle;
            delayer(function() {
                branch(toX,
                    toY,
                    length * config.shrinking,
                    branchAngle, line_width * config.reduction,
                    delayer,
                    level + 1);
            });
        }());
    }
}

function redraw() {
    init();
    var delayer = function(fn) {
        fn();
    };
    branch(W / 2,
        H - 50,
        config["branch length"], -90,
        config["branch width"],
        delayer,
        1);
}

function init() {
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fill();
    ctx.strokeStyle = "brown";
}

function animate() {
    init();
    var delayTime = config["animation time"] / config.levels;
    var delayer = function(fn) {
        setTimeout(fn, delayTime);
    };
    branch(W / 2,
        H - 50,
        config["branch length"], -90,
        config["branch width"],
        delayer,
        1);
}

var config = {
    "branch length": 100,
    "branches": 2,
    "angle": 45,
    "reduction": 0.55,
    "shrinking": 0.75,
    "branch width": 10,
    "levels": 9,
    "animate": animate,
    "animation time": 700
};

(function() {
    var $body = $(document.body);
    keys = {};
    keys["leftMouse"] = false;
    keys["middleMouse"] = false;
    keys["rightMouse"] = false;
    var mousedown = false;
    var lastPosition = undefined;

$body.on('keydown', function(event) {
            if (event.keyCode === keyCode) {
                keys[key] = true;
            }
            callbackDown(keys[key]);
        });

$body.on('keyup', function(event) {
            if (event.keyCode === keyCode) {
                keys[key] = false;
            }
            callbackUp(keys[key]);
        });
    };

$body.on('mousedown', function(event) {
        lastPosition = {
            x: event.clientX,
            y: event.clientY
        };
        if (event.which === 1) {
            keys.leftMouse = true;
        } else if (event.which === 3) {
            keys.rightMouse = true;
        } else if (event.which === 2) {
            keys.middleMouse = true;
        }
    });

$body.on('mouseup', function(event) {
        mousedown = false;
        if (event.which === 1) {
            keys.leftMouse = false;
        } else if (event.which === 3) {
            keys.rightMouse = false;
        } else if (event.which === 2) {
            keys.middleMouse = false;
        }
    });

function addBinding(func) {
        $body.mousemove(function(event) {
            if (keys.leftMouse || keys.rightMouse) {
                var newPosition = {
                    x: event.clientX,
                    y: event.clientY
                };
                if (!lastPosition) {
                    lastPosition = newPosition;
                    return;
                }
                deltaX = newPosition.x - lastPosition.x;
                deltaY = newPosition.y - lastPosition.y;

func(deltaX, deltaY);
                lastPosition = newPosition;
            }
        });
    }

window.addBinding = addBinding;
    window.generateKeydown = generateKeydown;
}(window));

function keepValueInRange(value, min, max) {
    if (value < min) {
        return min;
    } else if (value > max) {
        return max;
    }
    return value;
};

generateKeydown('a', 65);
generateKeydown('s', 83);
generateKeydown('d', 68);
generateKeydown('f', 70);

(function() {
    var hasMoused = 0;
    var explanation = $("p");

addBinding(function(dX, dY, mouseButton) {
        if (hasMoused === 0) {
            fadeToText("Try dragging with the other button");
            hasMoused = 1;
        }
        if (hasMoused === 2) {
            fadeToText("Did you hear about a? I heard she likes playing with the mouse!");
            hasMoused = 3;
        }
        if (hasMoused === 4) {
            fadeToText("a also has a friend, 's'.");
            hasMoused = 5;
        }
        if (hasMoused === 6) {
            fadeToText("All that's left is this menu...");
            setTimeout(function() {
                var gui = new dat.GUI();
                gui.add(config, 'branches', 1, 5).step(1).onChange(redraw);
                gui.add(config, 'levels', 1, 15).step(1).onChange(redraw);
                gui.add(config, 'animate');
            }, 1500);
            hasMoused = 7;
        }

if (keys.rightMouse) {
            dX /= 16;
            dY /= 16;
            if (hasMoused === 1) {
                hasMoused = 2;
            }
        }

if (keys.a) {
            var changer = translate(dX, 0, 5, .02, .30);
            config.reduction = keepValueInRange(config.reduction + changer, .5, 1);
            if (hasMoused === 3) {
                hasMoused = 4;
            }
        } else if (keys.s) {
            var changer = translate(dX, 0, 5, .02, .30);
            config.shrinking = keepValueInRange(config.shrinking + changer, .5, 1);
            if (hasMoused === 5) {
                hasMoused = 6;
            }
        } else {
            config.angle = keepValueInRange(config.angle + dX, 0, 180);
        }
        config["branch length"] = keepValueInRange(config["branch length"] - dY, 50, 250);
        redraw();
    });
}());

redraw();

编译

CSS

HTML

Tree，Trunk，Branch 可拖拉来缩放或变形。

Canvas

编辑器支持Emmet

快捷键

Tree，Trunk，Branch 可拖拉来缩放或变形。

Canvas

HTML5 Canvas像素操控实现的变形动画

HTML5 Canvas能变形变色的魔法粒子群

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：