Canvas 操控树的生长/开花/结果

Life Of Tree, based on http://techie-notebook.blogspot.com/2012/08/pretty-fractal-trees-using-html-5.html

tree

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// darw the initial tree
function start() {
    var c = document.getElementById('canv');
    draw_tree(c.width, c.height);
}

//button to draw tree
function redraw_tree() {
    var c = document.getElementById('canv');
    draw_tree(c.width, c.height);
}

//canvas resize
function resize_canvas() {
    var max_length = document.getElementById("canvas_size").value;
    var c = document.getElementById('canv');
    c.width = max_length * 10 / 8;
    c.height = max_length;

redraw_tree();
}
window.onload = start;

var draw_flowers = false;
var draw_apples = false;
var apple_color = 'hsla(360, 95%, 35%, 1)';
var flower_color = 'hsla(255,255%,255%, 1)';
var tree_buffer; // tree location in window

function draw_tree(width, height) {

tree_buffer = document.createElement('canvas');
        tree_buffer.width = width;
        tree_buffer.height = height;

var max_length = document.getElementById("tree_seg_length").value;
        document.getElementById("slider_value").innerHTML = max_length;

clear_canvas(tree_buffer);

if (tree_buffer.getContext) {
            var $ = tree_buffer.getContext('2d');
            drawFractalTree($, width, height);
        }

tree_transfer();

}
    //Copy tree buffer to viewable screen
function tree_transfer() {
        clear_canvas();
        var c = document.getElementById('canv');
        c.getContext('2d').drawImage(tree_buffer, 0, 0);

}
    //Top level of drawing tree (start recursion)
function drawFractalTree($, window_width, window_height) {
    draw_branch($, window_width / 2, window_height, -90, 11);
}

//Recursive drawing of branches
function draw_branch($, x1, y1, angle, depth) {
    var max_length = +(document.getElementById("tree_seg_length").value);
    var branch_length = random(0, max_length);

if (depth != 0) {
        var x2 = x1 + (cos(angle) * depth * branch_length);
        var y2 = y1 + (sin(angle) * depth * branch_length);
        drawLine($, x1, y1, x2, y2, depth);
        draw_branch($, x2, y2, angle - random(15, 20), depth - 1);
        draw_branch($, x2, y2, angle + random(15, 20), depth - 1);

if (depth < 6 && depth > 1) {
            if (draw_apples && random(1, 40) == 1) {
                draw_circle($, x1, y1, 6, apple_color);
            }
        }
    } else {
        if (draw_flowers) {
            draw_circle($, x1, y1, 3, flower_color);
        }
    }
}

function drawLine($, x1, y1, x2, y2, thickness) {
        $.fillStyle = '#000';

if (thickness > 6) {
            $.strokeStyle = 'hsla(29, 95%, 5%, 1)'; // Brown
        } else {
            $.strokeStyle = 'hsla(112, 95%, 15%, 1)'; // Green
        }

$.lineWidth = thickness * 1.5;
        $.beginPath();

$.moveTo(x1, y1);
        $.lineTo(x2, y2);

$.closePath();
        $.stroke();
    }
    //draw a circle
function draw_circle($, x, y, radius, color) {
        $.fillStyle = '#000';

$.beginPath();
        $.arc(x, y, radius, 0, 2 * Math.PI, false);
        $.fillStyle = color;
        $.fill();
        $.lineWidth = 1;
        $.strokeStyle = '#003300';
        $.stroke();
    }
    //cos using angles
function cos(angle) {
        return Math.cos(deg_to_rad(angle));
    }
    //sin using angles instead of radians
function sin(angle) {
        return Math.sin(deg_to_rad(angle));
    }
    //degree /radian conversion
function deg_to_rad(angle) {
        return angle * (Math.PI / 180.0);
    }
    //random number between min and max
function random(min, max) {
        return min + Math.floor(Math.random() * (max + 1 - min));
    }
    //Clear canvas
function clear_canvas(c) {
    if (typeof canvas === 'undefined') // default parameter
    {
        c = document.getElementById('canv');
    }

c.getContext('2d').clearRect(0, 0, c.width, c.height);
}

// Toggle Flowers
function toggle_flowers() {
    draw_flowers = !draw_flowers;
    clear_canvas();
    redraw_tree();
}

// Toggle apples
function toggle_apples() {
    draw_apples = !draw_apples;
    clear_canvas();
    redraw_tree();
}

编译

CSS

HTML

Life Of Tree, based on http://techie-notebook.blogspot.com/2012/08/pretty-fractal-trees-using-html-5.html

tree

编辑器支持Emmet

快捷键

Life Of Tree, based on http://techie-notebook.blogspot.com/2012/08/pretty-fractal-trees-using-html-5.html

tree

jQuery+HTML5 Canvas春暖花开（树生长开花）场景动画

Canvas 在黑暗中生长发亮的树

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：