找回密码
 会员注册
查看: 692|回复: 0

利用Html5 canvas 画出彩票走势图

[复制链接]

1389

主题

5

回帖

496万

积分

管理员

积分
4962986
发表于 2023-1-9 18:06:05 | 显示全部楼层 |阅读模式
效果图


对应代码:


<!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>



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

QQ|手机版|心飞设计-版权所有:微度网络信息技术服务中心 ( 鲁ICP备17032091号-12 )|网站地图

GMT+8, 2024-12-24 09:31 , Processed in 0.281312 second(s), 27 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表