如何用js代码绘制一棵树

来源：懂视网责编：小采时间：2020-11-27 19:54:52

如何用js代码绘制一棵树

如何用js代码绘制一棵树:本篇文章给大家分享的内容是如何用js代码绘制一棵树，有着一定的参考价值，有需要的朋友可以参考一下第一步新建HTML文档：<html> <head> <style type="text/css"> /*设置body样式*/ body{ overflo

推荐度：

点击下载本文 文档为doc格式

导读如何用js代码绘制一棵树:本篇文章给大家分享的内容是如何用js代码绘制一棵树，有着一定的参考价值，有需要的朋友可以参考一下第一步新建HTML文档：<html> <head> <style type="text/css"> /*设置body样式*/ body{ overflo

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

第一步新建HTML文档：

<html> 
 <head> 
 <style type="text/css"> 
 /*设置body样式*/ 
 body{ 
 overflow:hidden; 
 background: black; 
 } 
 </style> 
 </head> 
 <!--设置屏幕背景黑色--> 
 <body> 
 <script src="js.js"></script> 
 </body>
</html>

第二步建一个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);
/*------------绘制树的函数-------------------*/
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(); //绘制
}

最后的成果图如下所示：

如何用js代码绘制一棵树

推荐度：

点击下载本文 文档为doc格式

标签： js 代码一棵树

热门焦点

如何用js代码绘制一棵树

如何用js代码绘制一棵树

如何用js代码绘制一棵树

最新推荐

猜你喜欢

热门推荐