javascript - ツリーアルゴリズムのためにWebGL、HTML5、またはCSS3で線を引く方法は?

Question

WebGL、HTML5、または CSS3 を使用してキャンバスに特定の色の線を描画するにはどうすればよいですか。

私は基本的に初心者で、ツリーアルゴリズムの描画から始めています。親ノードと子ノードを結ぶ線を引きたい。誰かが私を正しい方向に導くことができますか？

Answer 1

ほとんどの場合、キャンバスに線を描画するにはJavascriptを使用する必要があります。キャンバスへの描画を非常に簡単にするAPIを提供するpaper.jsのようなライブラリを確認することをお勧めします。

ライブラリを使用したくない場合、キャンバスに線を描画すると次のようになります。

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()
}