1. <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
        <meta content="telephone=no" name="format-detection" />
        <title></title>
        <script src="js/jquery-3.3.0.js"></script>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            .tab{
                width:900px;
                margin: 0 auto;
                position: relative;
            }
            .active{display: inline-block;
            width: 20px;
                height: 20px;
                background-color: red;
                text-align: center;
                line-height: 20px;
                color: #fff;
                border-radius: 50%;
            }
            td{
                text-align: center;
            }
        </style>
    <script>
        $(function () {
         var tbody=  $("#tbody");
         var str='';
         var arr=[3,2,5,4,7,9,1,6,8,3,2,5,4,7,9,7,8,8];
         var span=function (le,le1) {
             if(le==le1){
                 return '<span class="active">'+le1+'</span>';
             }else {
                 return le1;
             }
         }
         for (let i=0;i<arr.length;i++) {
             str+='<tr id="'+i+'">' +
                 '<td>'+span(arr[i],0)+'</td>' +
                 '<td>'+span(arr[i],1)+'</td>' +
                 '<td>'+span(arr[i],2)+'</td>' +
                 '<td>'+span(arr[i],3)+'</td>' +
                 '<td>'+span(arr[i],4)+'</td>' +
                 '<td>'+span(arr[i],5)+'</td>' +
                 '<td>'+span(arr[i],6)+'</td>' +
                 '<td>'+span(arr[i],7)+'</td>' +
                 '<td>'+span(arr[i],8)+'</td>' +
                 '<td>'+span(arr[i],9)+'</td>' +
                 '</tr>';
         }
     var s= $(str).appendTo(tbody);
    $(".active",s).hover(function () {
        var setoff=$(this).offset();
        console.log(setoff.top,setoff.left)
    });
  2.  
  3.      var arr=[];
         $.each($(".active",tbody),function () {
             var setoff=$(this).offset();
            var jo={"top":setoff.top,"left":setoff.left,id:$(this).parent().parent().attr("id"),w:$(this).width(),h:$(this).height()};
             arr.push(jo);
         });
  4.  
  5. for(let a=arr.length-1;a>0;a--){
        var c=document.createElement("canvas");
        var wLeft=tbody.offset().left;
        var wTop=tbody.offset().top;
        var st=arr[a];
        var pr=arr[a-1];
        var cTop=Math.min(st.top,pr.top);
        var cLeft=Math.min(st.left,pr.left);
        var cw,cuLeft,ch,cuTop,mToLeft,mToTop,liToLeft,liToTop;
        var activeH=st.h/2;
        if(st.left<pr.left){
            cw= pr.left-st.left-st.h;
            cuLeft= st.left-wLeft+st.h;
            ch=st.top-pr.top;
            cuTop=pr.top-wTop+activeH;
            mToLeft=pr.left-cLeft;
            mToTop=pr.top-cTop;
            liToLeft=st.left-cLeft;
            liToTop=st.top-cTop;
        }else if(st.left==pr.left){
            cw= st.w;
            cuLeft=st.left-wLeft;
            ch=(st.top-pr.top)/2+5;
            cuTop=pr.top-wTop+st.h;
            mToLeft=cw/2;
            mToTop=pr.top-cTop;
            liToLeft=cw/2;
            liToTop=st.top-cTop;
        }else{
            cw=st.left-pr.left-st.h;
            cuLeft=st.left-wLeft-cw;
            ch=st.top-pr.top;
            cuTop=pr.top-wTop+activeH;
            mToLeft=pr.left-cLeft;
            mToTop=pr.top-cTop;
            liToLeft=st.left-cLeft;
            liToTop=st.top-cTop;
        }
        c.style.position='absolute';
        c.style.top=cuTop+"px";
        c.style.left=cuLeft+"px";
        c.width=cw;
        c.height=ch;
        c.id=arr[a].id;
        let cx=c.getContext("2d");
        cx.strokeStyle="red";
        cx.moveTo(mToLeft,mToTop);
        cx.lineTo(liToLeft,liToTop);
        cx.stroke();
        $(c).appendTo(tbody);
    }
  6.  
  7.     });
  8.  
  9. </script>
    </head>
    <body>
        <div class="tab">
            <table width="100%" cellpadding="0" cellspacing="0" >
                <thead>
                <tr></tr>
                </thead>
                <tbody id="tbody"></tbody>
            </table>
                </div>
            </body>
  10.  
  11. </html>

  1.  

canvas 连线曲线图的更多相关文章

  1. canvas 连线曲线图封装

    $.fn.hChart=function (opt) { var setting=$.extend({ className:'', data:[] },opt); var tbody=this; va ...

  2. 兼容IE浏览器的canvas画线和圆圈

    1.新建test.html文件,代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8& ...

  3. canvas 画线

    一.canvas是基于状态的绘图环境 1.canvas是基于状态的绘制 context.moveTo(100,100); context.lineTo(700,700); context.lineWi ...

  4. canvas绘制线和矩形

    ###canvas绘制矩形 HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形: ----> ...

  5. canvas连线特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. canvas 添加线和删除线 及获取相关位置信息源码

    其他相关链接: https://github.com/lusase/lineDrawer.git https://www.jb51.net/css/359062.html https://www.jb ...

  7. HTML5之Canvas绘图实例——曲线图

    实现正弦.余弦和正切函数画图(如下图):调试环境:Firefox

  8. 利用Canvas进行绘制XY坐标系

    首先来一发图 绘制XY的坐标主要是利用Canvas setLeft和setBottom功能(Canvas内置坐标的功能) 1.首先WPF中的坐标系都是从左到右,从上到下的 即左上角位置(0,0)点,所 ...

  9. HTML5 Canvas中实现绘制一个像素宽的细线

    正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...

随机推荐

  1. JS判断客户端是否是iOS或者Android或者ipad（二）

    js判断客户端是IPAD和iphone 多了就不说了,直接上代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22     funct ...

  2. 并发编程——全局解释器锁GIL

    1.全局解释器锁GIL GIL其实就是一把互斥锁(牺牲了效率但是保证了数据的安全). 线程是执行单位,但是不能直接运行,需要先拿到python解释器解释之后才能被cpu执行 同一时刻同一个进程内多个线 ...

  3. Java简述

    Java的特点(11个关键术语)from<Java核心技术I> 1) 简单性 2)  面向对象 3)  分布式 Java有一个丰富的例程库,用于处理像HTTP和FTP之类的TCP/IP协议 ...

  4. BZOJ 3676 [Apio2014]回文串 (后缀自动机+manacher/回文自动机)

    题目大意: 给你一个字符串,求其中回文子串的长度*出现次数的最大值 明明是PAM裸题我干嘛要用SAM做 回文子串有一个神奇的性质,一个字符串本质不同的回文子串个数是$O(n)$级别的 用$manach ...

  5. Python 绘图与可视化 matplotlib（上）

    参考链接:https://www.cnblogs.com/dudududu/p/9149762.html 更详细的:https://www.cnblogs.com/zhizhan/p/5615947. ...

  6. Vue - vue.js 常用指令

    Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...

  7. PHP读取XML数据中CDATA内数值

    // 在开发过程中遇到对XML获取时候加载 CDATA 无法读取内部的数值(例如微信平台的返回值) $content = simplexml_load_string('<content>& ...

  8. 【Codeforces Round #483 (Div. 2) C】Finite or not?

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 有个性质. 如果p/q是分数的最简形式. 那么p/q能化成有限小数. 当且仅当q的质因数分解形式中只有质因子2和5 (且不能出现其他 ...

  9. HDU——T 1054 Strategic Game

    http://acm.hdu.edu.cn/showproblem.php?pid=1054 Time Limit: 20000/10000 MS (Java/Others)    Memory Li ...

  10. cogs 2060. 除法表达式

    2060. 除法表达式 ★★   输入文件:baoquansl.in   输出文件:baoquansl.out   简单对比时间限制:1 s   内存限制:256 MB [题目描述] 经过无尽的蘑菇和 ...