本篇文章给大家分享的内容是如何用js代码绘制一棵树 ，有着一定的参考价值，有需要的朋友可以参考一下
第一步新建html文档：
/*设置body样式*/ body{ overflow:hidden; background: black; }
登录后复制
第二步建一个js文档：
//创建画布var mycanvas=document.createElement("canvas");//设置树的宽度和高度mycanvas.width=1500;mycanvas.height=900;//绘制画布的对象并设置为2Dvar 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);/*------------绘制树的函数-------------------*/function draw(n,x0,y0,length,th){//（画树深度，起始位置x0,y0，长度，度数） if(n==0) return; //计算线条末端坐标 var x1=x0+length*Math.cos(th); var y1=y0+length*Math.sin(th); //画线 drawline(x0,y0,x1,y1); //画子树递归 draw(n-1,x1,y1,0.8*length*(Math.random()+0.4),th+(20+Math.random()*5)*Math.PI/180); draw(n-1,x1,y1,0.6*length*(Math.random()+0.5),th-(30+Math.random()*5)*Math.PI/180);}/*--------------绘制线段-----------------------*/function drawline(x0,y0,x1,y1){context.moveTo(x0,y0);//设置绘制的起点context.lineTo(x1,y1);//设置线段的末尾context.stroke(); //绘制}
登录后复制
最后的成果图如下所示：
相关推荐：
python绘制树和森林
绘制一棵树
怎么用js代码画一棵树
以上就是如何用js代码绘制一棵树的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2772217.html
