<!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)
});

     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);
     });

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);
}

    });

</script>
</head>
<body>
    <div class="tab">
        <table width="100%" cellpadding="0" cellspacing="0" >
            <thead>
            <tr></tr>
            </thead>
            <tbody id="tbody"></tbody>
        </table>
            </div>
        </body>

</html>


												


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

    
						
  1. canvas 连线曲线图封装
		
    $.fn.hChart=function (opt) { var setting=$.extend({ className:'', data:[] },opt); var tbody=this; va ...
    
		
    2. 
								
  2. 兼容IE浏览器的canvas画线和圆圈
		
    1.新建test.html文件,代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8& ...
    
		
    3. 
						
  3. canvas 画线
		
    一.canvas是基于状态的绘图环境 1.canvas是基于状态的绘制 context.moveTo(100,100); context.lineTo(700,700); context.lineWi ...
    
		
    4. 
						
  4. canvas绘制线和矩形
		
    ###canvas绘制矩形 HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形: ----> ...
    
		
    5. 
						
  5. canvas连线特效
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    6. 
						
  6. canvas 添加线和删除线 及获取相关位置信息源码
		
    其他相关链接: https://github.com/lusase/lineDrawer.git https://www.jb51.net/css/359062.html https://www.jb ...
    
		
    7. 
						
  7. HTML5之Canvas绘图实例——曲线图
		
    实现正弦.余弦和正切函数画图(如下图):调试环境:Firefox
    
		
    8. 
						
  8. 利用Canvas进行绘制XY坐标系
		
    首先来一发图 绘制XY的坐标主要是利用Canvas setLeft和setBottom功能(Canvas内置坐标的功能) 1.首先WPF中的坐标系都是从左到右,从上到下的 即左上角位置(0,0)点,所 ...
    
		
    9. 
						
  9. HTML5 Canvas中实现绘制一个像素宽的细线
		
    正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Codeforces div2 #499 B. Planning The Expedition 大水题
			
    已经是水到一定程度了QAQ- Code: #include<cstdio> #include<algorithm> #include<cstring> using  ...
    
			
    2. 
						
  2. Sona && Little Elephant and Array && Little Elephant and Array  && D-query  && Powerful array && Fast Queries  (莫队)
			
    vjudge上莫队专题 真的是要吐槽自己(自己的莫队手残写了2个bug) s=sqrt(n) 是元素的个数而不是询问的个数(之所以是sqrt(n)使得左端点每个块左端点的范围嘴都是sqrt(n)) 在 ...
    
			
    3. 
						
  3. 12、Camel: Content-Aware and Meta-path Augmented Metric Learning for Author Identification----作者识别
			
    摘自:https://blog.csdn.net/me_yundou/article/details/80459341 具体看上面链接 一.摘要: 这篇文章主要介绍的是作者识别(author iden ...
    
			
    4. 
						
  4. d3代码如何改造成update结构（恰当处理enter和exit）
			
    d3的enter和exit 网上有很多blog讲解.说的还凑合的见:https://blog.csdn.net/nicolecc/article/details/50786661 如何把自己的rude ...
    
			
    5. 
						
  5. C文件I/O超详细教程
			
    本文主要参考了C Primer Plus (5th & 6th Edition) 您可以选择本文的部分内容来读,有些内容对于不熟悉MS-DOS的读者可能过于晦涩难懂. C语言文件基本知识 文件 ...
    
			
    6. 
						
  6. [LeetCode] 860. 柠檬水找零 lemonade-change(贪心算法）
			
    思路: 收到5块时,只是添加:收到十块时,添加10块,删除一个5块:收到20块时,添加20,删除一个10块一个5块,或者直接删除3个5块(注意:这里先删除5+10优于3个5) class Soluti ...
    
			
    7. 
						
  7. css清楚样式
			
    
			
    8. 
						
  8. js特效——自动滚动
			
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
			
    9. 
						
  9. 面向程序猿的设计模式 ——GoF《设计模式》读书总结（壹）抽象工厂&amp;生成器
			
    第一部分:创建型模式 创建型模式抽象了实例化过程. 它们帮助一个系统独立于怎样创建.组合和表示它的那些对象.(把一些小的对象组装成大对象,这个工作由专门的类对象来做) 一个类创建型模式使用继承改变被实 ...
    
			
    10. 
						
  10. NYOJ  815  三角形【海伦公式】
			
    /* 关键点:海伦公式 解题人:lingnichong 解题时间:2014-10-04 21:48:47 解题体会:海伦公式的使用 */ 三角形 时间限制:1000 ms  |  内存限制:65535 ...
    
			
    11.