Html5 canvas 绘制彩票走势图

来源：互联网发布：淘宝申请售后多久过期编辑：程序博客网时间：2024/04/27 16:25

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

先来一张效果图：

实现的代码：

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <script src="js/jquery-1.10.2.js"></script>    <style>        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; }    </style>    <script type="text/javascript">        $(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 = "<tr>";            for (var i = 1; i < 31; i++) {                head += "<th>H" + i + "</th>";                tbody += "<tr>";                for (var j = 1; j < 31; j++) {                    tbody += "<td id='T" + i + "_" + j + "'>" + j + "</td>";                }                tbody += "</tr>";            }            head += "</tr>";            $("#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);            }        }    </script></head><body>    <form id="form1" runat="server">        <table id="zstable">            <thead></thead>            <tbody></tbody>        </table>        <div id="canvasdiv">        </div>    </form></body></html>

0 0