オープンソースフレームZrender初期化機構

GitHubのオープンソースHTML 5フレームは、キャンバスを自分で使う必要がなく、非常にクールなグラフィックを描くことができます.
今日はプロジェクトで引用してみます
これまで同様のダイナミックローディングJSメカニズムを使用したことがなく、ドキュメントにはっきりと書かれていないため、
だから引用の方法を記録して、みんなの参考に供します
まずheadで2つのJSファイルを引用

//         JS  ，  JS            

に も なプログラムを します
まずbodyにdivを け、IDはMain

だから には なく、 JSを き めます.
このステップは で、ドキュメントには な がなく、 もあいまいです.
パスの

    require.config({
        packages: [
            {
                name: 'zrender',
                location: 'src',
                main: 'zrender'
            }
        ]
        });

              ，         JS   
   
  
     ，              
 
   
  
    require(
            [
                "zrender/zrender",
                 "zrender/shape/Rectangle"
            ],
            function (zrender, RectangleShape) {
                //    zrender
                var zr = zrender.init(document.getElementById("Main"));
                var RectangleObj = new RectangleShape({
                    style: {
                        x: 100,
                        y: 100,
                        width: 100,
                        lineWidth: 5,
                        height: 100,
                        radius: 10,
                        brushType: 'stroke',
                        strokecolor: "#000000",
                    },
                    draggable: true,
                    clickable: true
                });
ここではzrenderを  に  する.js(  )とRectangle.js、   な  などはドキュメントで  しているのがはっきりしていて、ここではイベントを  していません.  にはいろいろなイベントを  することもできます.
  にこのような  を くだけです
 zr.addShape(RectangleObj);
 zr.render();
  
    でいい
もちろんzrenderの  は だけではなく、  を けることができます.