因需要 要实现一个类似彩票走势图的功能，初次学Html5 ，很多地方不明白，前段时间也发帖请教过这个问题，也是没给个明确说话，在网上搜了很多，也没有实现的例子，今天仔细研究了下，发现其实也不是很难，现将代码贴出来，共同学习！

先来一张效果图：

实现的代码：

table { border: 0; margin: 0; border-collapse: collapse; border-spacing: 0; font-size: 11px; font-family: Arial; margin: 0 auto; }

table td, table th { padding: 0; border: 1px solid #d8d8d8; height: 23px; width: 23px; text-align: center; color: #666; }

table th { font-weight: bold; color: #000; }

$(function () {

CreateTable();

var ids = "";

for (var i = 1; i < 31; i++) {

ids+= "T" + i + "_" + Math.floor(1 + Math.random() * (31 - 1)) + ",";

}

ids = ids.substring(0, ids.length - 1);

CreateLine(ids, 20, "#ff6600", "canvasdiv", "#d5d5d5");

});

function CreateTable() {

var tbody = "";

var head = "

";

for (var i = 1; i < 31; i++) {

head += "

H" + i + "";

tbody += "

";

for (var j = 1; j < 31; j++) {

tbody += "

" + j + "";

}

tbody += "

";

}

head += "";

$("#zstable thead").html(head);

$("#zstable tbody").html(tbody);

}

function CreateLine(ids, w, c, div, bg) {

var list = ids.split(",");

for (var j = list.length - 1; j > 0; j--) {

var tid = $("#" + list[j]);

var fid = $("#" + list[j - 1]);

var f_width = fid.outerWidth();

var f_height = fid.outerHeight();

var f_offset = fid.offset();

var f_top = f_offset.top;

var f_left = f_offset.left;

var t_offset = tid.offset();

var t_top = t_offset.top;

var t_left = t_offset.left;

var cvs_left = Math.min(f_left, t_left);

var cvs_top = Math.min(f_top, t_top);

tid.css("background", bg).css("color", "red");

fid.css("background", bg).css("color", "red");

var cvs = document.createElement("canvas");

cvs.width = Math.abs(f_left - t_left) < w ? w : Math.abs(f_left - t_left);

cvs.height = Math.abs(f_top - t_top);

cvs.style.top = cvs_top + parseInt(f_height / 2) + "px";

cvs.style.left = cvs_left + parseInt(f_width / 2) + "px";

cvs.style.position = "absolute";

var cxt = cvs.getContext("2d");

cxt.save();

cxt.strokeStyle = c;

cxt.lineWidth = 1;

cxt.lineJoin = "round";

cxt.beginPath();

cxt.moveTo(f_left - cvs_left, f_top - cvs_top);

cxt.lineTo(t_left - cvs_left, t_top - cvs_top);

cxt.closePath();

cxt.stroke();

cxt.restore();

$("#" + div).append(cvs);

}

}