html如何绘制树结构图,HTML 5 Canvas 递归画树

上图就是用html5随机生成的大树 : ) 但是你应该没想到40+行代码就可以搞定了吧~接下来就跟大家说说这棵大树是如何实现的。

同样必须要有html容器。新建Index.html，代码如下:

canvas tree

接下来咱们开始tree.js:

varcanvas=document.createElement("canvas");

varctx=canvas.getContext("2d");

canvas.width=640;

canvas.height=480;

document.body.appendChild(canvas);

代码很好理解，创建一个canvas画布，然后选择为2d画布，设置长宽，***将这个画布添加到body标签下。

这个脚本最重要的函数在下面，大树就是递归调用这个函数实现的，调用一次画一条线段:

vardrawTree=function(ctx, startX, startY, length, angle, depth, branchWidth){

varrand&#