canvas 连线曲线图
<!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 连线曲线图的更多相关文章
- canvas 连线曲线图封装
$.fn.hChart=function (opt) { var setting=$.extend({ className:'', data:[] },opt); var tbody=this; va ...
- 兼容IE浏览器的canvas画线和圆圈
1.新建test.html文件,代码如下: <!DOCTYPE html><html><head> <meta charset="utf-8& ...
- canvas 画线
一.canvas是基于状态的绘图环境 1.canvas是基于状态的绘制 context.moveTo(100,100); context.lineTo(700,700); context.lineWi ...
- canvas绘制线和矩形
###canvas绘制矩形 HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形: ----> ...
- canvas连线特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- canvas 添加线和删除线 及获取相关位置信息源码
其他相关链接: https://github.com/lusase/lineDrawer.git https://www.jb51.net/css/359062.html https://www.jb ...
- HTML5之Canvas绘图实例——曲线图
实现正弦.余弦和正切函数画图(如下图):调试环境:Firefox
- 利用Canvas进行绘制XY坐标系
首先来一发图 绘制XY的坐标主要是利用Canvas setLeft和setBottom功能(Canvas内置坐标的功能) 1.首先WPF中的坐标系都是从左到右,从上到下的 即左上角位置(0,0)点,所 ...
- HTML5 Canvas中实现绘制一个像素宽的细线
正统的HTML5 Canvas中如下代码 ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); c ...
随机推荐
- Xcode7 下导入第三方库 图文介绍
网上没有很好的图文介绍,干脆我自己写一个好了,方便新手入门. 这里以导入著名的第三方网络库AFNetWorking v3.0.4和数据库FMDB v2.6.2为例进行说明. 好,下面开始. 下载源文件 ...
- HDU 1086 You can Solve a Geometry Problem too（ 判断线段是否相交 水题 ）
链接:传送门 题意:给出 n 个线段找到交点个数 思路:数据量小,直接暴力判断所有线段是否相交 /*************************************************** ...
- UVA1583-Digit Generator（紫书例题3.5）
For a positive integer N , the digit-sum of N is defined as the sum of N itself and its digits. When ...
- NOI 2018 归程 (Kruskal重构树)
题目大意:太长了,略 Kruskal重构树,很神奇的一个算法吧 如果两个并查集被某种条件合并,那么这个条件作为一个新的节点连接两个并查集 那么在接下来的提问中,如果某个点合法,它的所有子节点也都合法, ...
- [luogu] P4823 [TJOI2013]拯救小矮人（贪心）
P4823 [TJOI2013]拯救小矮人 题目描述 一群小矮人掉进了一个很深的陷阱里,由于太矮爬不上来,于是他们决定搭一个人梯.即:一个小矮人站在另一小矮人的 肩膀上,知道最顶端的小矮人伸直胳膊可以 ...
- 【 【henuacm2016级暑期训练】动态规划专题 K】 Really Big Numbers
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 会发现如果x是reallynumber那么x+1也会是reallynumber.... (个位数+1,各位数的和+1了但是整个数也+ ...
- 2015 Multi-University Training Contest 4 hdu 5338 ZZX and Permutations
ZZX and Permutations Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/O ...
- C#-单元测试知识点
指的是软件中对最小单元进行测试的一种测试方法 开发阶段的测试发现问题并解决问题是最节省时间和成本 Ctrl+R Ctrl+A 自动化执行单元测试 查看代码覆盖率,通常要达到80,90%的代码测试覆盖率 ...
- Linux 网络搭建
如果系统环境崩溃. 调用/usr/bin/vim /etc/profile Windows 1 本地连接使用固定IP vmware 8 2 修改Windows的hosts地址 ...
- spring boot启动原理步骤分析
spring boot最重要的三个文件:1.启动类 2.pom.xml 3.application.yml配置文件 一.启动类->main方法 spring boot启动原理步骤分析 1.spr ...