html5利用canvas绘画二级树形结构图的方法

这篇“html5利用canvas绘画二级树形结构图的方法”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“html5利用canvas绘画二级树形结构图的方法”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细节处理妥当，希望大家通过这篇文章有所收获，下面让我们一起来看看具体内容吧。

html是什么

html的全称为超文本标记语言，它是一种标记语言，包含了一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等，主要和css+js配合使用并构建优雅的前端网页。

html5利用canvas绘画二级树形结构图的方法

下面是设计图：

做出效果如下：

html、css代码就不贴了。 js主要用到了拖拽、canvas绘制。

functionstartDrag(ev){
ev.dataTransfer.setData("Text",ev.target.innerText);
}

functionallowDrop(ev){
ev.preventDefault();
}

functiondecideDrop(ev){
ev.preventDefault();
varlength=$('.main-target').length;
if(length==0){
dropToMain(ev);
}else{
dropToRelate(ev);
}
}

functiondropToMain(ev){
vardata=ev.dataTransfer.getData("Text");
var_html='<pclass="main-target">'+data+'</p>';
$('.main-target-wrap').width('auto').append(_html);
}

functiondropToRelate(ev){
//画关系线
drawLineOne(document.getElementById('canvasOne'),'begin');
drawLineOne(document.getElementById('canvasTwo'),'end');

//插入图片以及图片初始化点击事件
var_img=$('<imgsrc="inner.png">');
$('.imgBox').append(_img);
_img.click(showRelationBox);
//写入数据
vardata=ev.dataTransfer.getData('Text');
var_html='<pclass="item-text">'+data+'</p>';
$('.relation-text-box').append(_html);
}

以上是拖拽的方法，我也是一边看菜鸟教程，一边写出的拖拽方法。

functiondrawLineOne(canvas,flag){
varcontext=canvas.getContext('2d');
varposition={};
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:*}}
*/
functiongetCanvasOnePosition(){
varimgLength=$('.imgBoximg').length;
varbeginX=(imgLength==0)?0:77,
beginY=(imgLength==0)?15:(15+60*(imgLength-1)),
endX=(imgLength==0)?155:77,
endY=60*imgLength+15;
varposition={beginX:beginX,beginY:beginY,endX:endX,endY:endY};
if(imgLength>0){
position.endX2=155;
position.endY2=endY;
}
returnposition;
}

functiongetCanvasTwoPosition(){
varimgLength=$('.imgBoximg').length;
varendY=15+60*imgLength
return{beginX:0,beginY:endY,endX:155,endY:endY}
}

感谢你的阅读，希望你对“html5利用canvas绘画二级树形结构图的方法”这一关键问题有了一定的理解，具体使用情况还需要大家自己动手实验使用过才能领会，快去试试吧，如果想阅读更多相关知识点的文章，欢迎关注恰卡编程网行业资讯频道！