如何用js代碼繪制一棵樹

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:54:52

如何用js代碼繪制一棵樹

如何用js代碼繪制一棵樹:本篇文章給大家分享的內(nèi)容是如何用js代碼繪制一棵樹，有著一定的參考價(jià)值，有需要的朋友可以參考一下第一步新建HTML文檔：<html> <head> <style type="text/css"> /*設(shè)置body樣式*/ body{ overflo

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀如何用js代碼繪制一棵樹:本篇文章給大家分享的內(nèi)容是如何用js代碼繪制一棵樹，有著一定的參考價(jià)值，有需要的朋友可以參考一下第一步新建HTML文檔：<html> <head> <style type="text/css"> /*設(shè)置body樣式*/ body{ overflo

本篇文章給大家分享的內(nèi)容是如何用js代碼繪制一棵樹，有著一定的參考價(jià)值，有需要的朋友可以參考一下

第一步新建HTML文檔：

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

第二步建一個(gè)js文檔：

//創(chuàng)建畫布
var mycanvas=document.createElement("canvas");
//設(shè)置樹的寬度和高度
mycanvas.width=1500;
mycanvas.height=900;
//繪制畫布的對象并設(shè)置為2D
var context=mycanvas.getContext("2d");
//設(shè)置劃線的類型顏色
context.strokeStyle="#ff00ff";
//設(shè)置線的寬度
context.lineWidth=2;
//將畫布添加到窗體上
document.body.appendChild(mycanvas);
///////////////////////////////////////////
/*---------------畫圖部分----------------*/
///////////////////////////////////////////
//畫樹深度
var n=10;
//設(shè)置初始角度
var th=-Math.PI/2;
//設(shè)置初始位置
var x0=700;
var y0=700;
//調(diào)用繪圖函數(shù)
draw(n-1,700,700,100,th);
/*------------繪制樹的函數(shù)-------------------*/
function draw(n,x0,y0,length,th){//（畫樹深度，起始位置x0,y0，長度，度數(shù)）
 if(n==0)
 return;
 //計(jì)算線條末端坐標(biāo)
 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);//設(shè)置繪制的起點(diǎn)
context.lineTo(x1,y1);//設(shè)置線段的末尾
context.stroke(); //繪制
}

最后的成果圖如下所示：