如何在WebGL，HTML5或CSS3中為樹算法繪制線條？

Question

如何使用WebGL，HTML5或CSS3在畫布上繪制特定顏色的線。

我基本上是一個初學者，首先從繪制樹算法開始。 我想畫線將父節點連接到其子節點。 有人可以引導我朝正確的方向前進。

Answer 1

您很可能需要使用Javascript在畫布上繪制線條。 您可能想看一看像paper.js這樣的庫，它提供了一個API，可以使在畫布上進行繪制變得更加容易。

如果您不想使用庫，則在畫布上繪制線條看起來像這樣：

var drawingCanvas = document.getElementById('myDrawing');
// Check the element is in the DOM and the browser supports canvas
if(drawingCanvas.getContext) {
    // Initaliase a 2-dimensional drawing context
    var ctx = drawingCanvas.getContext('2d');
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.moveTo(5*14,5);
    ctx.lineTo(5*14,140);
    ctx.stroke()
}