我會把div定位為絕對的,然后把它們放在你想要的地方.然后用這個功能獲得他們的位置：

//Get the absolute position of a DOM object on a page

function findPos(obj) {

var curLeft = curTop = 0;

if (obj.offsetParent) {

do {

curLeft += obj.offsetLeft;

curTop += obj.offsetTop;

} while (obj = obj.offsetParent);

}

return {x:curLeft, y:curTop};

}

當你有自己的位置,把它添加到一半的寬度/高度,你將有他們的中心在頁面上的位置.現(xiàn)在找到畫布的位置,并從之前找到的數(shù)字中減去它.如果您在兩點之間畫一條線,則應(yīng)鏈接兩個div.如果不清楚,我將如何編寫代碼：

var centerX = findPos(document.getElementById('x'));

centerX.x += document.getElementById('x').style.width;

centerX.y += document.getElementById('x').style.height;

var centerZ = findPos(document.getElementById('Z'));

centerZ.x += document.getElementById('z').style.width;

centerZ.y += document.getElementById('z').style.height;

//Now you've got both centers in reference to the page

var canvasPos = findPos(document.getElementById('canvas'));

centerX.x -= canvasPos.x;

centerX.y -= canvasPos.y;

centerZ.x -= canvasPos.x;

centerZ.y -= canvasPos.y;

//Now both points are in reference to the canvas

var ctx = document.getElementById('canvas').getContext('2d');

ctx.beginPath();

ctx.moveTo(centerX.x, centerX.y);

ctx.lineTo(centerZ.x, centerZ.y);

ctx.stroke();

//Now you should have a line between both divs. You should call this code each time the position changes

編輯

順便說一句,使用findPos函數(shù),您還可以將div的初始位置設(shè)置為相對于畫布(在(30; 40))：

var position = {x: 30, y: 40};

var canvasPos = findPos(document.getElementById('canvas'));

var xPos = canvasPos.x + position.x;

var yPos = canvasPos.y + position.y;

document.getElementById('x').style.left = xPos+"px";

document.getElementById('x').style.top = yPos+"px";

總結(jié)

以上是生活随笔為你收集整理的div和div之间画横线_javascript – jQuery – 使用画布在div之间绘制线条的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。