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。

HTML5 Canvas lineTo with recursion

1 个答案: