HTML5 Canvas line遞歸問題

Question

所以，我很無聊，決定做一個簡單的BST，然後我認爲它將整齊繪製在畫布上。我正在使用遍歷，所以它按照正確的順序打印樹。如果你看這個的jsfiddle：http://jsfiddle.net/BY6Ap/13/

下面是從的jsfiddle方法：

BST.prototype._draw = function(ctx, node, x, y, depth) { 
    if (node == null) { 
     return; 
    } 
    if (node.left != null) { 
     ctx.moveTo(x - 100/depth, y + 50 + depth * 10); 
    } 
    this._draw(ctx, node.left, x - 100/depth, y + 50 + depth * 10, depth + 1); 
    ctx.lineTo(x, y); 

    this._drawNode(ctx, node, x, y); 

    if (node.right != null) { 
     ctx.moveTo(x + 100/depth, y + 50 + depth * 10); 
    } 
    this._draw(ctx, node.right, x + 100/depth, y + 50 + depth * 10, depth + 1); 
    ctx.lineTo(x, y); 
} 

BST.prototype._drawNode = function(ctx, node, x, y) { 
    //ctx.beginPath(); 
    ctx.arc(x, y, 12, 0, 2*Math.PI); 
    ctx.fillText(node.data, x, y); 
    //ctx.stroke(); 
} 

你可以看到它正在繪製。我唯一的問題是，lineTo或moveTo似乎試圖在繪製節點的右側水平繪製一條額外的線。我想知道是否有人可以把我扔到一個方向去除多餘的線。我嘗試了很多東西，但似乎沒有任何工作。

感謝

Answer 1

我認爲你只是缺少beginPath當你開始繪製。

BST.prototype._draw = function(ctx, node, x, y, depth) { 
    ctx.beginPath(); //<- this is what you were missing 

這裏是更新的jsfiddle。