web front-end entry to combat: html5 canvas analog implementation, tree growth

h5+css3

html5 + css3 web development has been a hot spot, since in 1999 HTML 4.01 has changed a lot, and today, in a few in HTML 4.01 have been abandoned, these elements have been deleted or redefined in HTML5.

To better handle today's internet use, HTML5 adds many new elements and features, such as: graphics rendering, multimedia content, better page structure, better form processing, and several api drag and drop elements, positioning, including web application cache, storage, networking and other workers.

Introduction canvas

canvas is the protagonist of our article

label	description
<canvas>	Label definition graphics, charts, and other such images. The tag-based drawing API JavaScript

Simple practice

Learn just make something happen, a simulation of the growth of the tree
which is effect shots

web front-end entry to combat: html5 canvas analog implementation, tree growth

tree

First on the code

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tree</title>
</head>
<body>
    <canvas id='d1' width="600" height="500" style="border:dashed 2px #ccc;"></canvas>
    <script>
    var drawtree = function (ctx,startx,starty,length,angle,depth,branchWidth){
        var rand=Math.random,
        n_length,n_angle,n_depth,maxbranch=4,
        endx,endy,maxangle=2 * Math.PI / 4;
        var subbranch;
        ctx.beginPath();
        ctx.moveTo(startx,starty);
        endx=startx + length * Math.cos(angle);
        endy=starty + length * Math.sin(angle);
        ctx.lineCap='round';
        ctx.lineWidth=branchWidth;
        ctx.lineTo(endx,endy);
        if(depth<=2 ){
            //树的枝干
            ctx.strokeStyle= 'rgb(0,' + (((rand() * 64) +128) >>0) + ',0)';
        }
        else{
            //树的叶子
            ctx.strokeStyle= 'rgb(0,' + (((rand() * 64) +64) >>0) + ',50,25)';
        }
        ctx.stroke();
        n_depth = depth-1;
        //判断树是否结束
        if(!n_depth){
            return;
        }
        subbranch= (rand() * (maxbranch-1)) + 1;
        branchWidth *=0.5; 
        for(var i=0;i<subbranch;i++){
            n_angle = angle +rand() * maxangle -maxangle *0.5;
            n_length = length * (0.5 + rand() *0.5);
            setTimeout(function (){
                drawtree(ctx,endx,endy,n_length,n_angle,n_depth,branchWidth);
                return;
            },500)
        }
    }

    var canvas=document.getElementById('d1');
    var ctx= canvas.getContext('2d');
    //初始化的树
    drawtree(ctx,300,470,100,-Math.PI / 2, 12, 12);
    </script>
</body>
</html>
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（从零基础开始到前端项目实战教程，学习工具，职业规划）

The results were pretty good, but the code is not long
basic idea is to use the black line to simulate branches, green line to simulate leaves, then use setTimeout to produce animation, each draw a Take this as a starting point to generate additional branches until the depth reaches the set value stops.