本身寫拓撲圖

function tuoFn() {
    $.ajax({
        url: url + 'XX',
        type: 'post',
        success: function (res) {
            var c=document.getElementById("myCanvas");
            var ctx=c.getContext("2d");
            ctx.lineWidth = 1;
            ctx.strokeStyle='red';
            var arr=res.data
            for(var i=0;i<arr.length;i++){
                var x=arr[i].x*$('.box')[0].offsetWidth+'px'
                var y=arr[i].y*$('.box')[0].offsetHeight+'px'
                var xImg=(arr[i].x*$('.box')[0].offsetWidth+70)+'px'
                // var x=arr[i].x*100+'%'
                // var y=arr[i].y*100+'%'
                // var Num1=arr[i].hostId
                var  Num=arr[i].connectHostId;
                console.log(Num)
                if(Num==null||Num==''){
                    $('.box').append('<img hostId='+arr[i].hostId+'    id='+arr[i].hostId +'    src="../image/tuopu1.png" class='+arr[i].hostId+' style="position: absolute;left:'+x+';top:'+y+';" connctId='+arr[i].connectHostId+' >');
                    $('.active').append('<div class="outBox" style="position: absolute;left:'+x+';top:'+y+';"><div class="content" style="display: none;left:'+xImg+';top:'+y+'">名稱：'+arr[i].hostName+'<br/>IP:'+arr[i].hostIp+'</div></div>')
                }else{
                    $('.box').append('<img hostId='+arr[i].hostId+'   id='+arr[i].hostId +'    src="../image/tuopu2.png" class='+arr[i].hostId+' style="position: absolute;left:'+x+';top:'+y+';" connctId='+arr[i].connectHostId+'>');
                    $('.active').append('<div class="outBox" style="position: absolute;left:'+x+';top:'+y+';"><div class="content" style="display: none;left:'+xImg+';top:'+y+'">名稱：'+arr[i].hostName+'<br/>IP:'+arr[i].hostIp+'</div></div>')
                }
            }
            
            // 用covers畫線
            for(var i=0;i<arr.length;i++){
                var x1=arr[i].x*$('.box')[0].offsetWidth+20;
                var y1=arr[i].y*$('.box')[0].offsetHeight+30;
                console.log(x1,y1);
                // ctx.beginPath();
                // ctx.moveTo(x1,y1);
                var t=arr[i].hostId;
                console.log(t);
                var coId=$("#"+t).attr("connctId");
                if(coId){
                    coId =coId.split(",")
                    console.log(coId);
                    for(var j=0;j<coId.length;j++){
                        console.log('kkkk');
                        var xt=$("."+coId[j]).position().left+20;
                        var yt=$("."+coId[j]).position().top+30;
                        console.log(xt,yt);
                        // ctx.lineTo(xt,yt);
                        // ctx.stroke();
                        // ctx.closePath();
                        drawArrow(ctx, x1,y1, xt,yt,20,20,1,'#f36');
                    }

                }
            }
            Hover()
        },error:function(){
            console.log(err)
        }
    })
}

//線的箭頭

function drawArrow(ctx, fromX, fromY, toX, toY,theta,headlen,width,color) {

    var theta = theta || 30,
        headlen = headlen || 10,
        width = width || 1,
        color = color || '#000',
        angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
        angle1 = (angle + theta) * Math.PI / 180,
        angle2 = (angle - theta) * Math.PI / 180,
        topX = headlen * Math.cos(angle1),
        topY = headlen * Math.sin(angle1),
        botX = headlen * Math.cos(angle2),
        botY = headlen * Math.sin(angle2);
    ctx.save();
    ctx.beginPath();
    var arrowX, arrowY;
    ctx.moveTo(fromX, fromY);
    ctx.lineTo(toX, toY);
    arrowX = toX + topX;
    arrowY = toY + topY;
    ctx.moveTo(arrowX, arrowY);
    ctx.lineTo(toX, toY);
    arrowX = toX + botX;
    arrowY = toY + botY;
    ctx.lineTo(arrowX, arrowY);
    ctx.fillStyle="red";  //設置填充顏色
    ctx.fill();  //執行填充
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    ctx.stroke();
    ctx.closePath();
}複製代碼