使用画布连接具有相同类的元素 [英] Connect elements with same class using canvas
本文介绍了使用画布连接具有相同类的元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在处理具有数字集的表.
每个集合都有一个存在"类的数字，因为第一列中存在该数字.
我想做的是，使用画布行将这些数字连接到每列.
我设法使用offset来获得他们的位置，但不知道如何实现.
希望你能理解我.
谢谢.
采样结果
$('table tbody tr').each(function(k, x) {
$(this).find('td:first-child .rw').each(function(t, u) {
const n = $(this).text().trim();
var rw = Array.from(n.toString()).map(Number);
var $this = $(this);
for (var i = 0; i < n.length; i++) {
var char = n.charAt(i);
var d = $("table tbody tr:eq(" + k + ") td:eq(" + (i + 1) + ") div.rw:eq(" + t + ")");
d.find("div:eq(" + char + ")").addClass("exist");
}
});
});
var canvas = document.getElementById('canvasLines');
var ctx = canvas.getContext('2d');
var Point = function(x,y){
this.x = x;
this.y = y;
}
function drawLine(stPoint, endPoint,color){
ctx.beginPath();
ctx.moveTo(stPoint.x,stPoint.y);
ctx.lineTo(endPoint.x,endPoint.y);
ctx.strokeStyle = color;
ctx.stroke();
ctx.closePath();
}
$('table tbody tr td:nth-child(2) .rw div.exist').each(function(i, el) {
var ex = $(this).offset();
drawLine(new Point(ex.top,ex.left),new Point(ex.top,ex.left),'red');
});
table{
width: 100%;
border-collapse: collapse;
}
table, td, th{
border: 1px solid #dadce8;
text-align: center;
}
th:first-child, td:first-child{
width: 50px;
}
th,td{
width: 180px;
}
.rw div{
width: 10%;
float: left;
line-height: 24px;
}
td:first-child{
padding-top: 3px;
}
td:first-child .rw{
height: 24px;
}
td:nth-child(n+2):nth-child(-n+6).rw{
padding-top: 3px;
height: 30px;
}
td .rw div.exist{
background-color: green;
border-radius: 100px;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>numbers</th>
<th>1st</th>
<th>2nd</th>
<th>3rd</th>
<th>4th</th>
<th>5th</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="rw">
98371
</div>
<div class="rw">
09827
</div>
<div class="rw">
18276
</div>
<div class="rw">
76591
</div>
<div class="rw">
09832
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="rw">
12312
</div>
<div class="rw">
89271
</div>
<div class="rw">
53919
</div>
<div class="rw">
53201
</div>
<div class="rw">
09832
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
</tr>
</tbody>
</table>
<canvas id="canvasLines" width="600" height="150"></canvas>
解决方案
我在这里为您提供一些示例.这可以做您想要的事情.
稍后根据您的需要/代码/css以及更多内容对其进行修改. :)
HTML
<canvas id="myCanvas" width="500" height="1000">
<table class="table" style="border-collapse: collapse;border:1px solid #ccc;">
<tr>
<th>DATA 1</th>
<th>DATA 2</th>
</tr>
<tr>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div class="active">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div class="active">7</div>
<div>8</div>
<div>9</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="rw">
<div>0</div>
<div class="active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div class="active">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div class="active">8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="active">5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="rw">
<div class="active">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div class="active">9</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="active">6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="active">5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div class="active">9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div class="active">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
</tr>
</table>
</canvas>
JAVASCRIPT
var c = $("#myCanvas");
var ctx = c.get(0).getContext("2d");
var txt = c.html();
var sty = $('style').text();
var c_h = c.height();
var c_w = c.width();
var pt1 = new Array();
var pt2 = new Array();
var fix = 0; // dirty solution for different/gap because of padding/margin or border that have pixel (px). Not too great. but still can do its work. :D
ctx.strokeStyle="red";
$("tr",c).each(function(m,n){
var temp = "";
if(m !== 0){ // Skip HEADER (TH)
if(m === 1){ // 1st row only store the offset. Not create stroke yet
$("td",this).each(function(x,y){
pt1.push($(".active",this).offset()); // Store the offset for each td that have active class;
});
}else{ // after 1st row, create stroke - from and to
if(pt2.length){
temp = pt2;
pt2 = [];
}
else{
temp = pt1;
pt1 = [];
}
$("td",this).each(function(x,y){
pt2.push($(".active",this).offset()); // Store the offset for each td that have active class;
});
for(var q=0; q<$("td",this).length; q++){
ctx.beginPath();
ctx.moveTo(temp[q].left, temp[q].top+fix); // From point (active) 1
ctx.lineTo(pt2[q].left,pt2[q].top+fix); // To point (active) 2
ctx.stroke();
}
}
}
fix += 3; // dirty solution for different/gap because of padding/margin or border that have pixel (px). Not too great. but still can do its work. :D
});
/*
Make table as a image type.
*/
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='"+c_w+"' height='"+c_h+"'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:20px'>"+
"<style type='text/css'>"+sty+"</style>" +
txt +
"</div>" +
"</foreignObject>" +
"</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
};
img.src = url;
JSFiddle工作示例: http://jsfiddle.net/synz/4La50o1j/
I'm working on a table that has sets of numbers.
every set has one number with class 'exist' because the are present on the first column.
What I'm trying to do is, to connect those numbers per column using canvas line.
I manage to get their position using offset but don't know how to implement it.
Hope you understand me.
Thanks.
Sample Result
$('table tbody tr').each(function(k, x) {
$(this).find('td:first-child .rw').each(function(t, u) {
const n = $(this).text().trim();
var rw = Array.from(n.toString()).map(Number);
var $this = $(this);
for (var i = 0; i < n.length; i++) {
var char = n.charAt(i);
var d = $("table tbody tr:eq(" + k + ") td:eq(" + (i + 1) + ") div.rw:eq(" + t + ")");
d.find("div:eq(" + char + ")").addClass("exist");
}
});
});
var canvas = document.getElementById('canvasLines');
var ctx = canvas.getContext('2d');
var Point = function(x,y){
this.x = x;
this.y = y;
}
function drawLine(stPoint, endPoint,color){
ctx.beginPath();
ctx.moveTo(stPoint.x,stPoint.y);
ctx.lineTo(endPoint.x,endPoint.y);
ctx.strokeStyle = color;
ctx.stroke();
ctx.closePath();
}
$('table tbody tr td:nth-child(2) .rw div.exist').each(function(i, el) {
var ex = $(this).offset();
drawLine(new Point(ex.top,ex.left),new Point(ex.top,ex.left),'red');
});
table{
width: 100%;
border-collapse: collapse;
}
table, td, th{
border: 1px solid #dadce8;
text-align: center;
}
th:first-child, td:first-child{
width: 50px;
}
th,td{
width: 180px;
}
.rw div{
width: 10%;
float: left;
line-height: 24px;
}
td:first-child{
padding-top: 3px;
}
td:first-child .rw{
height: 24px;
}
td:nth-child(n+2):nth-child(-n+6).rw{
padding-top: 3px;
height: 30px;
}
td .rw div.exist{
background-color: green;
border-radius: 100px;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>numbers</th>
<th>1st</th>
<th>2nd</th>
<th>3rd</th>
<th>4th</th>
<th>5th</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="rw">
98371
</div>
<div class="rw">
09827
</div>
<div class="rw">
18276
</div>
<div class="rw">
76591
</div>
<div class="rw">
09832
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="rw">
12312
</div>
<div class="rw">
89271
</div>
<div class="rw">
53919
</div>
<div class="rw">
53201
</div>
<div class="rw">
09832
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
</tr>
</tbody>
</table>
<canvas id="canvasLines" width="600" height="150"></canvas>
解决方案
I make some example for you here. This can do something like you want it.
Just modified it later according what you need/code/css and more. :)
HTML
<canvas id="myCanvas" width="500" height="1000">
<table class="table" style="border-collapse: collapse;border:1px solid #ccc;">
<tr>
<th>DATA 1</th>
<th>DATA 2</th>
</tr>
<tr>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div class="active">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div class="active">7</div>
<div>8</div>
<div>9</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="rw">
<div>0</div>
<div class="active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div class="active">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div class="active">8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="active">5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="rw">
<div class="active">0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div class="active">9</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div class="active">6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="active">5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div class="active">9</div>
</div>
</td>
<td>
<div class="rw">
<div>0</div>
<div>1</div>
<div class="active">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</td>
</tr>
</table>
</canvas>
JAVASCRIPT
var c = $("#myCanvas");
var ctx = c.get(0).getContext("2d");
var txt = c.html();
var sty = $('style').text();
var c_h = c.height();
var c_w = c.width();
var pt1 = new Array();
var pt2 = new Array();
var fix = 0; // dirty solution for different/gap because of padding/margin or border that have pixel (px). Not too great. but still can do its work. :D
ctx.strokeStyle="red";
$("tr",c).each(function(m,n){
var temp = "";
if(m !== 0){ // Skip HEADER (TH)
if(m === 1){ // 1st row only store the offset. Not create stroke yet
$("td",this).each(function(x,y){
pt1.push($(".active",this).offset()); // Store the offset for each td that have active class;
});
}else{ // after 1st row, create stroke - from and to
if(pt2.length){
temp = pt2;
pt2 = [];
}
else{
temp = pt1;
pt1 = [];
}
$("td",this).each(function(x,y){
pt2.push($(".active",this).offset()); // Store the offset for each td that have active class;
});
for(var q=0; q<$("td",this).length; q++){
ctx.beginPath();
ctx.moveTo(temp[q].left, temp[q].top+fix); // From point (active) 1
ctx.lineTo(pt2[q].left,pt2[q].top+fix); // To point (active) 2
ctx.stroke();
}
}
}
fix += 3; // dirty solution for different/gap because of padding/margin or border that have pixel (px). Not too great. but still can do its work. :D
});
/*
Make table as a image type.
*/
var data = "<svg xmlns='http://www.w3.org/2000/svg' width='"+c_w+"' height='"+c_h+"'>" +
"<foreignObject width='100%' height='100%'>" +
"<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:20px'>"+
"<style type='text/css'>"+sty+"</style>" +
txt +
"</div>" +
"</foreignObject>" +
"</svg>";
var DOMURL = self.URL || self.webkitURL || self;
var img = new Image();
var svg = new Blob([data], {type: "image/svg+xml;charset=utf-8"});
var url = DOMURL.createObjectURL(svg);
img.onload = function() {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
};
img.src = url;
JSFiddle working example : http://jsfiddle.net/synz/4La50o1j/
这篇关于使用画布连接具有相同类的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
