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

先来一张效果图：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXBjMDA3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

实现的代码：

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

Html5 canvas 绘制彩票走势图的更多相关文章

  1. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  2. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

  3. 【转】使用Python matplotlib绘制股票走势图

    转载出处 一.前言 matplotlib[1]是著名的python绘图库,它提供了一整套绘图API,十分适合交互式绘图.本人在工作过程中涉及到股票数据的处理如绘制K线等,因此将matplotlib的使 ...

  4. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

  5. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

  6. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  7. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  8. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  9. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

随机推荐

  1. Android 自定义 ListView 上下拉动刷新最新和加载更多

    本文内容 开发环境 演示上下拉动刷新最新和加载更多 ListView 参考资料 本文演示上下拉动,刷新最新和加载更多,这个效果很常见,比如,新闻资讯类 APP,当向下拉动时,加载最新的资讯:向上拉动时 ...

  2. yii源码三 -- db

    <AR> CActiveRecord:path:/framework/db/ar/CActiveRecord.phpoverview:is the base class for class ...

  3. Iperf是一个网络性能测试工具

    http://blog.163.com/hlz_2599/blog/static/142378474201341341339314/ Iperf是一个网络性能测试工具.Iperf可以测试TCP和UDP ...

  4. CDH的安装和设置

    采用伪分布模式安装和设置CDH,前提是已经安装了Java和SSH. 1. 下载hadoop-2.6.0-cdh5.9.0,复制到/opt/下,再解压: 2. 进入/opt/hadoop-2.6.0-c ...

  5. js 内置函数 内置对象

    1.内置函数 Object Array Boolean Number String Function Date RegExp Error 2.内置对象 Date JSON

  6. 解决 ERROR in native method: JDWP No transports initialized, jvmtiError=AGENT_ERROR_TRANSPORT_INIT(197)

    在/etc/hosts文件中加入下面一行内容 127.0.0.1 localhost.localdomain localhost

  7. nano在CentOS上的安装和使用

    安装: yum -y install nano 打开新建:nano 路径+文件名 查看用:cat path/filename如果改文件存在,上面的命令将打开这个文件:如果文件不存在则将会创建一个新文件 ...

  8. iOS 9 时代，iOS 7 占比接近 10% 该何去何从？

    iOS 9 时代.iOS 7 占比接近 10% 该何去何从? 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&qu ...

  9. django之创建第10个项目-图片上传方式1

    1.upload.HTMl <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang=& ...

  10. 转error while loading shared libraries的解決方法

    error while loading shared libraries的解決方法 者 icq 21:03 | 靜態連結網址 | 迴響 (0) | 引用 (1) | 點閱次數 (270) | Prog ...