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='' data ''; $('.main-target-wrap').width('auto').append(_html); }  functiondroptorelate(ev){ //画关系线 drawlineone(document.getelementbyid('canvasone'),'begin'); drawlineone(document.getelementbyid('canvastwo'),'end');  //插入图片以及图片初始化点击事件 var_img=$(''); $('.imgbox').append(_img); _img.click(showrelationbox); //写入数据 vardata=ev.datatransfer.getdata('text'); var_html='' data ''; $('.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绘画二级树形结构图的方法”这一关键问题有了一定的理解，具体使用情况还需要大家自己动手实验使用过才能领会，快去试试吧，如果想阅读更多相关知识点的文章，欢迎关注恰卡编程网行业资讯频道！