上周需要做一個把頁面左側列表內容拖拽到右側區域，并且繪制成關系樹的功能。

看了設計圖，第一反應是用canvas繪制關系線。

吭哧吭哧搞定這個功能后，發現用canvas繪圖，有一個很嚴重的缺陷。那就是如果左側關系特別多，需要繪制成百上千條時，而canvas畫布的寬高在寫dom的時候就已聲明。關系很多的情況下，無法使用canvas。

不過還是記錄一下研究成果。

下面是設計圖：

做出效果如下：

html、css代碼就不貼了。 js主要用到了拖拽、canvas繪制。

function startDrag(ev) { ev.dataTransfer.setData( Text ,ev.target.innerText);function allowDrop(ev) { ev.preventDefault();function decideDrop(ev) { ev.preventDefault(); var length = $( .main-target ).length; if(length == 0){ dropToMain(ev); }else { dropToRelate(ev);function dropToMain(ev) { var data=ev.dataTransfer.getData( Text  var _html = p >
以上是拖拽的方法，我也是一邊看菜鳥教程，一邊寫出的拖拽方法。
function drawLineOne(canvas, flag) { var context = canvas.getContext( 2d  var position = {}; if(flag == begin ){ position = getCanvasOnePosition(); }else { position = getCanvasTwoPosition(); context.beginPath(); context.moveTo(position.beginX, position.beginY); context.lineTo(position.endX, position.endY); if(position.endX2 position.endY2){ context.lineTo(position.endX2, position.endY2); context.strokeStyle = #333  context.stroke(); * 左側關系線 * @returns {{beginX: *, beginY: *, endX: *, endY: *}}function getCanvasOnePosition() { var imgLength = $( .imgBox img ).length; var beginX = (imgLength == 0) ? 0 : 77, beginY = (imgLength == 0) ? 15 : (15 + 60 * (imgLength-1)), endX = (imgLength == 0) ? 155 : 77, endY = 60*imgLength + 15; var position = {beginX: beginX, beginY: beginY, endX: endX, endY: endY}; if(imgLength 0){ position.endX2 = 155; position.endY2 = endY; return position;function getCanvasTwoPosition() { var imgLength = $( .imgBox img ).length; var endY = 15 + 60*imgLength return {beginX: 0, beginY: endY, endX: 155, endY: endY}}
以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP ！
相關推薦：
利用Canvas模仿百度貼吧客戶端loading小球的方法
canvas繪制各種基本圖形
html5使用html2canvas實現瀏覽器截圖
以上就是html5利用canvas繪畫二級樹形結構圖的詳細內容，其它編程語言        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。