<!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. 兼容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. iOS构建流畅的交互界面--CPU,GPU资源消耗的原因和解决方案

    CPU资源消耗的原因和解决方案对象创建轻量对象代替重量对象* 不需要响应触摸事件的控件:CALayer显示* 对象不涉及UI操作,则尽量放到后台线程创建* 包含有CALayer的控件只能在主线程创建和 ...

  2. ZBrush中的布料技巧分享

    今天主要给大家介绍一种在ZBrush®3D图形绘制软件中创建特定类型的布料的技巧,这种方法简单却非常强大. 这个想法源自下面这张图: 我们今天所要讲的技巧可能不是实现复杂的服装设计最有效的方法,但确实 ...

  3. Mysql-slowlog

    MySQL慢查询日志是MySQL提供的一种日志记录,用来记录执行时长超过指定时长的查询语句,具体指运行时间超过 long_query_time 值的 SQL 语句,则会被记录到慢查询日志中. long ...

  4. 工作需求——VBA操作打印机

    因为最近做的事情比较多,平时也多用EXCEL,所以顺便学习EXCEL的功能性的东西 转载:https://msdn.microsoft.com/zh-tw/vba/excel-vba/articles ...

  5. vue 移动端项目,动态控制div距离底部的距离

    <template> <div class="details"> <com-nav-bar title="保险详情"> &l ...

  6. jquery queryBuilder过滤插件的使用

    1.此插件用于过滤搜索的功能,功能强大,可实现复杂条件过滤,单选多选的等条件的过滤.还可以在插件中调用其他插件. 下载地址和文档阅读:http://querybuilder.js.org/ 效果图: ...

  7. python位操作(进制)与ascii

    位操作符 位操作的操作符与python的set的操作符一样.与C语言中的位操作符也是一样的. a = 60 #60的二进制为 0011 1100b = 13 #13的二进制为 00001101 c = ...

  8. HDU 1828 Picture (线段树:扫描线周长)

    依然是扫描线,只不过是求所有矩形覆盖之后形成的图形的周长. 容易发现,扫描线中的某一条横边对答案的贡献. 其实就是 加上/去掉这条边之前的答案 和 加上/去掉这条边之后的答案 之差的绝对值 然后横着竖 ...

  9. vue懒加载

    vue懒加载(白屏或者加载慢的解决方法) 懒加载:也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异 ...

  10. 【hihocoder 1519】 逃离迷宫II

    [题目链接]:http://hihocoder.com/problemset/problem/1519?sid=1098756 [题意] Chinese [题解] bfs题; 根据bfs的性质; 第一 ...