如何在WebGL、HTML5或CSS3中为树算法绘制线条

How to draw lines in WebGL, HTML5 or CSS3 for a tree algorithm?

本文关键字:算法 绘制 CSS3 WebGL HTML5      更新时间:2023-11-12

如何使用WebGL、HTML5或CSS3在画布上绘制特定颜色的线条。

我基本上是一个初学者,从绘制树算法开始。我想要绘制将父节点与其子节点连接的线。有人能把我带向正确的方向吗。

您很可能需要使用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()
}