javascript - 如何在 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()
}