使用 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();
}
var angle = 18;
var startPoint = new Point(720, 860);
var level = 0;
var length = 60;
var direction = 0;
var lineArr = [];