投稿日: 投稿者: のんき

JavaScript (50) SVG.jsライブラリを使用

前回と同様のロケットの絵を、今回は SVG.js と呼ばれる JavaScript のライブラリを使って表示してみました。

前回のコードに比べるとちょっと簡単になっていることが分かると思います。

以下は前回のロケットの頭部の三角形を表示するコード。Document オブジェクトで SVG のタグを生成しています。

    //  <polygon points="92,0 22,96 162,96" 
    //    style="fill:#752424;stroke:#000000;stroke-width:2"/>
    var obj = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
    obj.setAttribute('points', '92,0 22,96 162,96');
    obj.setAttribute('style', 'fill:#752424;stroke:#000000;stroke-width:2');
    //svg 要素に polygon 要素を追加
    svg.appendChild( obj );

以下が今回のロケットの頭部の三角形を表示するコードです。SVG.js のライブラリ関数を呼び出して SVG を生成しています。

    //  <polygon points="92,0 22,96 162,96" 
    //    style="fill:#752424;stroke:#000000;stroke-width:2"/>
    draw.polygon('92,0 22,96 162,96').fill('#752424').stroke({color: '#000000', width: 2})

今回作成したコードと実行結果はこちらです。

関連項目

“JavaScript (50) SVG.jsライブラリを使用” への2件の返信

  1. ピンバック: JavaScript (54) 新たなロケットの打ち上げ – のんきさんの年月記
  2. ピンバック: JavaScript (59) Snap.svgライブラリを使用 – のんきさんの年月記

コメントを残す