html用div做出一颗树的效果,如何用js代码绘制一棵树

本篇文章给大家分享的内容是如何用js代码绘制一棵树 ，有着一定的参考价值，有需要的朋友可以参考一下

第一步新建HTML文档：

/*设置body样式*/

body{

overflow:hidden;

background: black;

}

第二步建一个js文档：//创建画布

var mycanvas=document.createElement("canvas");

//设置树的宽度和高度

mycanvas.width=1500;

mycanvas.height=900;

//绘制画布的对象并设置为2D

var context=mycanvas.getContext("2d");

//设置划线的类型颜色

context.strokeStyle="#ff00ff";

//设置线的宽度

context.lineWidth=2;

//将画布添加到窗体上

document.body.appendChild(mycanvas);

///

/*---------------画图部分----------------*/

///

//画树深度

var n=10;

//设置初始角度

var th=-Math.PI/2;

//设置初始位置

var x0=700;

var y0=700;

//调用绘图函数

draw(n-1,700,700,100,th);