<canvas width="800" height="500" id="canvas" 
style=" background-color:#EEEEEE; border:1px solid #444;">

Jtopo的核心对象有6个，分别是Stage（舞台对象），Scene（场景对象），Node（节点对象），Link（连线对象），Container（容器对象），Effect.Animate（动画效果）

ar canvas = document.getElementById('canvas');            
varstage = new JTopo.Stage(canvas);// 创建一个舞台对象
//显示工具栏
// showJTopoToobar(stage);
var scene = new JTopo.Scene(stage); // 创建一个场景对象
// scene.background = './img/bg.jpg';

var node = new JTopo.Node("Hello"); // 创建一个节点                            
node.setLocation(409, 269); // 设置节点坐标 
scene.add(node); // 放入到场景中
node.setSize(40, 40);  // 尺寸
node.alpha =1;  // 透明度
node.setImage('static/images/text/mao.png'); // 设置图片
// 事件
stage.eagleEye.visible = true; //开启鹰眼
stage.wheelZoom = 0.85; //缩放比例为0.85

1 Stage：

1.1 Mode属性：

 stage.mode = 'normal'; //可以框选多个节点、可以点击单个节点

normal[默认] 可以点击选中单个节点（按住Ctrl可以选中多个），点中空白处可以拖拽整个画面
drag 该模式下不可以选择节点，只能拖拽整个画面
select 可以框选多个节点、可以点击单个节点
edit 在默认基础上增加了：选中节点时可以通过6个控制点来调整节点的宽、高
1.2 add/remove（scene）函数：

将一个场景加入到/移除出舞台效果

1.3 setCenter（x,y）函数：

设置舞台的中心坐标点（舞台平移）

在这里插入代码片

2 Scene：

2.1 Mode属性和Stage属性一致

2.2 alpha属性：场景的透明度

2.3 show()/hide() 函数：

表示场景的显示/隐藏

2.4 add/remove(element)函数：

添加对象到当前场景/移除场景中的某个元素

2.5 findElements（code）函数：

查找场景中的对象

3 Node：

3.1 dragable/selected/editAble/rotate属性：

设置节点是否可以被拖动/是否被选中/是否可编辑/节点旋转的角度

3.2 setImage（url）/setBound（x,y,width,height）函数：

设置节点的图片/坐标和宽，高

4.各种事件

eventTo(){
            node.mousedown(function(event){
                if(event.button == 2){
                    node.text = '按下右键';                    
                }else if(event.button == 1){
                    node.text = '按下中键';                    
                }else if(event.button == 0){
                    node.text = '按下左键';    
                }                
            });
            
            node.mouseup(function(event){                
                if(event.button == 2){
                    node.text = '松开右键';                    
                }else if(event.button == 1){
                    node.text = '松开中键';                    
                }else if(event.button == 0){
                    node.text = '松开左键';    
                }
            });    
            node.click(function(event){                    
                console.log("单击");                
            });    
            node.dbclick(function(event){                
                console.log("双击");                
            });
            node.mousedrag(function(event){                
                console.log("拖拽");
            });    
            node.mouseover(function(event){                
                console.log("mouseover");                
            });
            node.mousemove(function(event){                
                console.log("mousemove");                
            });    
            node.mouseout(function(event){                
                console.log("mouseout");                
            });    
        }

部分内容参照