<!-- 可以直接複製查看效果，html以及css可不用多看，主要查看JS，需引入Jquery，這裏使用cdn引入 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>彩票圖表走勢圖Demo</title>
<link rel="stylesheet" type="text/css" href="./css/reset.css" />
<!-- <link rel="stylesheet" type="text/css" href="./css/table.css" /> -->
<style type="text/css">
#main {
position: relative;
width: 1300px;
margin: 50px auto 0;
}
table {
width: 100%;
font-size: 14px;
border: 1px solid #ccc;
border-collapse: collapse;
}
td {
border: 1px solid #ccc;
text-align: center;
padding: 3px 0;
color: #494949;
vertical-align: middle;
}
#title td, #head td {
font-weight: bold;
}
td.lhc {
width: 20px;
height: 30px;
}
span.ballOne,
span.ballTwo,
span.ballThree {
display: block;
width: 20px;
height: 20px;
}
span.ballOne {
border-radius: 50px;
background-color: #bd5151;
color: #fff;
}
span.ballTwo {
color: #d2b0b0;
}
span.ballThree {
border-radius: 50px;
background-color: #1c74aa;
color: #fff;
}
#addCanvas canvas {
position: absolute;
}
</style>
</head>
<body>
<div id="main">
<table id="biaoge">
<tbody>
<tr id="title">
<td rowspan="2" colspan="5">期號</td>
<td rowspan="2" colspan="5">開獎號碼</td>
<td colspan="10">萬位</td>
<td colspan="10">千位</td>
<td colspan="10">百位</td>
<td colspan="10">十位</td>
<td colspan="10">個位</td>
</tr>
<tr id="head">
<td class="lhc"><strong>0</strong></td>
<td class="lhc"><strong>1</strong></td>
<td class="lhc"><strong>2</strong></td>
<td class="lhc"><strong>3</strong></td>
<td class="lhc"><strong>4</strong></td>
<td class="lhc"><strong>5</strong></td>
<td class="lhc"><strong>6</strong></td>
<td class="lhc"><strong>7</strong></td>
<td class="lhc"><strong>8</strong></td>
<td class="lhc"><strong>9</strong></td>
<td class="lhc"><strong>0</strong></td>
<td class="lhc"><strong>1</strong></td>
<td class="lhc"><strong>2</strong></td>
<td class="lhc"><strong>3</strong></td>
<td class="lhc"><strong>4</strong></td>
<td class="lhc"><strong>5</strong></td>
<td class="lhc"><strong>6</strong></td>
<td class="lhc"><strong>7</strong></td>
<td class="lhc"><strong>8</strong></td>
<td class="lhc"><strong>9</strong></td>
<td class="lhc"><strong>0</strong></td>
<td class="lhc"><strong>1</strong></td>
<td class="lhc"><strong>2</strong></td>
<td class="lhc"><strong>3</strong></td>
<td class="lhc"><strong>4</strong></td>
<td class="lhc"><strong>5</strong></td>
<td class="lhc"><strong>6</strong></td>
<td class="lhc"><strong>7</strong></td>
<td class="lhc"><strong>8</strong></td>
<td class="lhc"><strong>9</strong></td>
<td class="lhc"><strong>0</strong></td>
<td class="lhc"><strong>1</strong></td>
<td class="lhc"><strong>2</strong></td>
<td class="lhc"><strong>3</strong></td>
<td class="lhc"><strong>4</strong></td>
<td class="lhc"><strong>5</strong></td>
<td class="lhc"><strong>6</strong></td>
<td class="lhc"><strong>7</strong></td>
<td class="lhc"><strong>8</strong></td>
<td class="lhc"><strong>9</strong></td>
<td class="lhc"><strong>0</strong></td>
<td class="lhc"><strong>1</strong></td>
<td class="lhc"><strong>2</strong></td>
<td class="lhc"><strong>3</strong></td>
<td class="lhc"><strong>4</strong></td>
<td class="lhc"><strong>5</strong></td>
<td class="lhc"><strong>6</strong></td>
<td class="lhc"><strong>7</strong></td>
<td class="lhc"><strong>8</strong></td>
<td class="lhc"><strong>9</strong></td>
</tr>
<tr class="content">
<td colspan="5" class="data">2017-12-14</td>
<td colspan="1" class="lhc"><span class='ballOne'>2</span></td>
<td colspan="1" class="lhc"><span class='ballOne'>3</span></td>
<td colspan="1" class="lhc"><span class='ballOne'>4</span></td>
<td colspan="1" class="lhc"><span class='ballOne'>5</span></td>
<td colspan="1" class="lhc"><span class='ballOne'>7</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>0</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>1</span></td>
<td colspan="1" class="lhc"><span class='ballThree'>2</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>3</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>4</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>5</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>6</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>7</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>8</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>9</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>0</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>1</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>2</span></td>
<td colspan="1" class="lhc"><span class='ballThree'>3</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>4</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>5</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>6</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>7</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>8</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>9</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>0</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>1</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>2</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>3</span></td>
<td colspan="1" class="lhc"><span class='ballThree'>4</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>5</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>6</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>7</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>8</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>9</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>0</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>1</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>2</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>3</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>4</span></td>
<td colspan="1" class="lhc"><span class='ballThree'>5</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>6</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>7</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>8</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>9</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>0</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>1</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>2</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>3</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>4</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>5</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>6</span></td>
<td colspan="1" class="lhc"><span class='ballThree'>7</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>8</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>9</span></td>
</tr>
<tr class="content">
<td colspan="5" class="data">2017-12-14</td>
<td colspan="1" class="lhc"><span class='ballOne'>6</span></td>
<td colspan="1" class="lhc"><span class='ballOne'>7</span></td>
<td colspan="1" class="lhc"><span class='ballOne'>9</span></td>
<td colspan="1" class="lhc"><span class='ballOne'>2</span></td>
<td colspan="1" class="lhc"><span class='ballOne'>1</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>0</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>1</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>2</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>3</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>4</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>5</span></td>
<td colspan="1" class="lhc"><span class='ballThree'>6</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>7</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>8</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>9</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>0</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>1</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>2</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>3</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>4</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>5</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>6</span></td>
<td colspan="1" class="lhc"><span class='ballThree'>7</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>8</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>9</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>0</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>1</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>2</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>3</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>4</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>5</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>6</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>7</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>8</span></td>
<td colspan="1" class="lhc"><span class='ballThree'>9</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>0</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>1</span></td>
<td colspan="1" class="lhc"><span class='ballThree'>2</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>3</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>4</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>5</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>6</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>7</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>8</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>9</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>0</span></td>
<td colspan="1" class="lhc"><span class='ballThree'>1</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>2</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>3</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>4</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>5</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>6</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>7</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>8</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>9</span></td>
</tr>
<tr class="content">
<td colspan="5" class="data">2017-12-14</td>
<td colspan="1" class="lhc"><span class='ballOne'>4</span></td>
<td colspan="1" class="lhc"><span class='ballOne'>5</span></td>
<td colspan="1" class="lhc"><span class='ballOne'>1</span></td>
<td colspan="1" class="lhc"><span class='ballOne'>9</span></td>
<td colspan="1" class="lhc"><span class='ballOne'>3</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>0</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>1</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>2</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>3</span></td>
<td colspan="1" class="lhc"><span class='ballThree'>4</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>5</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>6</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>7</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>8</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>9</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>0</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>1</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>2</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>3</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>4</span></td>
<td colspan="1" class="lhc"><span class='ballThree'>5</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>6</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>7</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>8</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>9</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>0</span></td>
<td colspan="1" class="lhc"><span class='ballThree'>1</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>2</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>3</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>4</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>5</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>6</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>7</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>8</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>9</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>0</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>1</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>2</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>3</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>4</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>5</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>6</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>7</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>8</span></td>
<td colspan="1" class="lhc"><span class='ballThree'>9</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>0</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>1</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>2</span></td>
<td colspan="1" class="lhc"><span class='ballThree'>3</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>4</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>5</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>6</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>7</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>8</span></td>
<td colspan="1" class="lhc"><span class='ballTwo'>9</span></td>
</tr>
</tbody>
</table>
<div id="addCanvas"></div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
//fromLeft函數，即產生的折線是從左上角到右下角
function fromLeft(obj) {
var chartsObj = obj;
var w = parseInt(chartsObj.disWidth);//canvas的寬
var h = parseInt(chartsObj.disHeight);//canvas的高
var slw = parseInt(chartsObj.selfW);//單元框的寬
var slh = parseInt(chartsObj.selfH);//單元框的高
var cvsL = parseInt(chartsObj.cvsleft);//canvas的top
var cvsT = parseInt(chartsObj.cvsTop);//canvas的left
//使canvas的位置，即canvas的左上角與右下角移到兩個目標單元框的中心點
var cvsLeft = cvsL + (slw/2);
var cvsTop = cvsT + (slh/2);
// 創建canvas標籤並設置對應的樣式屬性
var canvas = document.createElement("canvas");
canvas.style.top = cvsTop + 'px';
canvas.style.left = cvsLeft + 'px';
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
canvas.width = w;
canvas.height = h;
// 創建畫布，畫線
var context = canvas.getContext("2d");//創建
context.beginPath();//開始畫布
context.strokeStyle = '#69f';//設置線條顏色
context.lineCap = 'round';//設置線條頭尾形狀
context.lineWidth = '2';//設置線條寬度
context.moveTo(0,0);//移到畫筆到原點(0,0)位置
context.lineTo(w, h);//從(0,0)位置開始畫線到右下角
context.stroke();//填充
context.closePath();//關閉畫布
// 把創建好的canvas插入頁面
$("#addCanvas").append(canvas)
}
//fromRight函數，即產生的折線是從右上角到左下角
function fromRight(obj) {
var chartsObj = obj;
var w = parseInt(chartsObj.disWidth);
var h = parseInt(chartsObj.disHeight);
var slw = parseInt(chartsObj.selfW);
var slh = parseInt(chartsObj.selfH);
var cvsL = parseInt(chartsObj.cvsleft);
var cvsT = parseInt(chartsObj.cvsTop);
var cvsLeft = cvsL + (slw/2) - w;
var cvsTop = cvsT + (slh/2);
// 創建canvas標籤並設置對應的樣式屬性
var canvas = document.createElement("canvas");
canvas.style.top = cvsTop + 'px';
canvas.style.left = cvsLeft + 'px';
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
canvas.width = w;
canvas.height = h;
// 創建畫布，畫線
var context = canvas.getContext("2d");
context.beginPath();
context.strokeStyle = '#69f';
context.lineCap = 'round';
context.lineWidth = '2';
context.moveTo(w,0);
context.lineTo(0, h);
context.stroke();
context.closePath();
// 把創建好的canvas插入頁面
$("#addCanvas").append(canvas)
}
var brr = $(".content .ballThree").parent();
//聲明chartsObj空對象，用於存儲需要傳入函數的參數
var chartsObj = {};
for (var i = 0; i <10; i++) {
// 判斷本期的中獎號碼第一位數與下一期中獎號碼第一位數誰大誰小
var direction = brr[i].offsetLeft - brr[i + 5].offsetLeft;
//獲取本期的中獎號碼第一位與下一期中獎號碼第一位兩球外框單元格的上邊的距離絕對值
chartsObj.disHeight = Math.abs(brr[i].offsetTop - brr[i + 5].offsetTop)
//獲取本期的中獎號碼第一位與下一期中獎號碼第一位兩球外框單元格的左側的距離絕對值
chartsObj.disWidth = Math.abs(brr[i].offsetLeft - brr[i + 5].offsetLeft)
//獲取球外框單元格的自身高度
chartsObj.selfW = brr[i].clientWidth;
//獲取球外框單元格的自身寬度
chartsObj.selfH = brr[i].clientHeight;
//獲取canvas的position的top的值，根據當前球的外框的offsetTop來決定
chartsObj.cvsTop = brr[i].offsetTop;
//獲取canvas的position的left的值，根據當前球的外框的offsetLeft來決定
chartsObj.cvsleft = brr[i].offsetLeft;
//根據上面變量direction的正負來判斷執行哪個函數
if(direction < 0) {
fromLeft(chartsObj);
} else {
fromRight(chartsObj);
}
}
</script>
</body>
</html>