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