使用JS canvas 画一棵二叉树

使用 js canvas 画一棵二叉树闲话少说，上效果图页面执行时是一层一层画出来的，下面是代码，优化的空间很大，有兴趣的可以拿去搞一搞

使用 js canvas 画一棵二叉树

闲话少说，上效果图

页面执行时是一层一层画出来的，下面是代码，优化的空间很大，有兴趣的可以拿去搞一搞

var Point = function(x, y){ this.x = x; this.y = y; }; var Line = function(length, startPoint, endPoint, direction, lr){ this.length = length; this.startPoint = startPoint; this.endPoint = endPoint; this.lr = lr;//用来区别根以上的分支是左还是右 this.direction = direction; }; function printLine(l){ ctx.fillStyle="#eaeaea"; ctx.fillRect(0,0,1440,860); ctx.moveTo(l.startPoint.x, l.startPoint.y); ctx.lineTo(l.endPoint.x, l.endPoint.y); ctx.strokeStyle="#1ee9a9"; ctx.stroke(); } //默认值：角度步长、起点、线段长度、初始方向、等级；角度步长、0级起点位置，作为不变信息处理 var angle = 18; var startPoint = new Point(720, 860); var level = 0; var length = 60; var direction = 0; var lineArr = []; function getEndPoint(startP, len, ang, flag){ var x = Math.sin(2 * Math.PI / 360 * ang) * len; var y = Math.cos(2 * Math.PI / 360 * ang) * len; return new Point(startP.x + flag * x, startP.y - y); } //flag 取值 “-1”“1”，表示当前线条在那个大分支上,-1左分支，1右分支 //n 表示当前计算的线是左分支=1、右分支=-1 function getLine(len, newSP, n, dir, flag){ var ang = dir + n * angle; return new Line(len, newSP, getEndPoint(newSP, len, ang, flag), ang, flag); } function getRootEndPoint(sp, len){ var ang = 0; var x = Math.sin(2 * Math.PI / 360 * ang) * len; var y = Math.cos(2 * Math.PI / 360 * ang) * len; return new Point(sp.x - x, sp.y - y); } function getRootLine(len, sp, dir, lr){ return new Line(len, sp, getRootEndPoint(startPoint, length), dir, lr); } function init(){ console.log("level = " + level); if(level == 0){ lineArr[0] = getRootLine(length, startPoint, direction, "root"); }else{ var n = Math.pow(2, level - 1);//当前的根节点是几个 var arr = [];//取出来的根节点 //通过 lineArr 倒叙 取 for(var i = 0 ; i < n ; i ++){ arr[arr.length] = lineArr[lineArr.length - 1 - i]; } //根据 arr 计算新节点，每个节点可算出两个新节点 var resArr = []; for(var i = 0 ; i < arr.length ; i ++){ var oneLine = arr[i]; var lr = oneLine.lr; var newSP = oneLine.endPoint; var len = oneLine.length - 2; var dir = oneLine.direction; if("root" == lr){ resArr[resArr.length] = getLine(len, newSP, 1, dir, -1); resArr[resArr.length] = getLine(len, newSP, 1, dir, 1); }else if("-1" == lr){ resArr[resArr.length] = getLine(len, newSP, 1, dir, -1); resArr[resArr.length] = getLine(len, newSP, -1, dir, -1); }else{ resArr[resArr.length] = getLine(len, newSP, 1, dir, 1); resArr[resArr.length] = getLine(len, newSP, -1, dir, 1); } } for(var i = 0 ; i < resArr.length ; i ++){ var oneLine = resArr[i]; lineArr[lineArr.length] = oneLine; } } level ++;//改变level } function printLineArr(){ if(lineArr.length > 0){ for(var i = 0 ; i < lineArr.length ; i ++){ printLine(lineArr[i]); } } } var times = 0; function run(){ ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); times ++; if(times >= 100){ times = 0; //变化的内容 level 、length 、起点终点坐标替换 if(level < 10){ init(); } } printLineArr(); } var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 16);//16毫秒 //eval(callback); }; })(); (function animloop(){ requestAnimFrame(animloop); run(); })();