Html5 canvas 繪製彩票走勢圖

阿新 • • 發佈：2019-01-18

因需要要實現一個類似彩票走勢圖的功能，初次學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>

Html5 canvas 繪製彩票走勢圖

因需要要實現一個類似彩票走勢圖的功能，初次學Html5 ，很多地方不明白，前段時間也發帖請教過這個問題，也是沒給個明確說話，在網上搜了很多，也沒有實現的例子，今天仔細研究了下，發現其實也不是很難，現將程式碼貼出來，共同學習！先來一張效果圖：實現的程式碼： <!

java 彩票走勢圖演算法

一、演算法介紹本博文主要寫了彩票走勢圖中的遺漏值、出現總次數、平均遺漏值、最大遺漏值、最大連出值的計算邏輯。二、圖文簡介 [這是XX網雙色球的彩票走勢圖，博主這裡是將彩票資料分割槽展示，以雙色球為例，分了五個區域，本博文中的遺漏值是按照期數的降序排列計算的如下圖]

canvas繪製餅狀圖

話不多說直接上程式碼 <canvas width="600" height="400"></canvas> <script> var PieChart = function (ctx) { /*繪製工具

Android 自定義控制元件 (一) ,柱狀圖 ,Canvas 繪製柱狀圖 ,支援觸控操作

專案中，經常會用到統計圖表，個性化展示資料，增加趣味性，之前也用過百度Echarts來展示，效果很不錯，包括一些互動操作，不得不說，echarts幫我我們實現了絕大多數的需求，體積小不說，實現方式也很簡單，後來想了想，為什麼不用安卓Canvas繪製呢，畢竟是安卓開發攻城獅，下

通過html5 canvas繪製時鐘

最近一直在學習html5，學到了html5的canvas標籤，這個畫布真的是很強大，它有對應的javascript的api的支援，你可以在這個標籤裡面繪製任意的圖形，你也可以把圖片放在裡面，能夠做出很炫的效果。言歸正傳，廢話不多說，首先，html，只一句

HTML5 Canvas繪製的圖形的事件處理

DOM是Web前端領域非常重要的組成部分，不僅在處理HTML元素時會用到DOM，圖形程式設計也同樣會用到。比如SVG繪圖，各種圖形都是以DOM節點的形式插入到頁面中，這就意味著可以使用DOM方法對圖形進行操作。比如有一個<path id="p1">元素，可以直

HTML5 Canvas 繪製橢圓與橢圓弧的實現

由於HTML Canvas 2D Context標準中並沒有直接繪製橢圓與橢圓弧的方法，所以瀏覽器普遍沒有這個方法，不過，Chrome支援ellipse方法，至於從哪個版本開始支援的，我就未查證了。IE11，Edge, Firefox, Safari目前最新版都還不支援。

HTML5 canvas 繪製圓形

canvas繪製圓形的思路： 1、建立路徑 XXX.beginpath(); 2、建立圓形的路徑； 3、關閉路徑；XXX.closepath(); 路徑不關閉也能繪製出圖形 4、設定繪製樣式。建立圓形路徑時需要用到物件的arc方法，方法定義如：XXX.arc(x,y,r

HTML5 canvas 繪製的文字如何換行？

HTML5 裡的 canvas 元素是一個圖形容器，我們可以通過 JavaScript 來控制它繪製各種文字和影象。在使用 canvas 繪製某字串的時候，我們可能想要讓該字串在某處按要求換行。這該怎麼實現呢？你是不是想到了 JavaScript 裡

天氣預報小應用之canvas實現溫度走勢圖

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> p,ul{margin: 0;

HTML5 Canvas繪製環形進度條

最近比較迷戀canvas，加之做了一個個人網站，有用到環形進度條，記錄下來。 canvas中沒有直接繪製圓的方法，但有一個繪製弧線的context.arc方法，下面講下用該方法如何繪製出圖片效果。 arc()方法介紹 context.arc(x,y,r,s

基於AChartEngine繪製股票走勢圖----K線圖一（繪製陰線陽線）

K線圖，繪製陰陽線繪製上陽線，基於基礎的react圖形，cancas繪製時限定react的top和bottom，資料點處理時，一個點傳遞五個資料，對應開盤，收盤，最高最低，上陽線是上漲顯示紅色，此時收盤大於開盤，當開收低高全部相等時，判斷依據和上一個交易日的

html5 canvas繪製圓形印章，以及與頁面互動

來源：https://www.cnblogs.com/hello-word1/p/5137626.html <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF

用canvas繪製的折線圖 +解析

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

第一講：使用html5——canvas繪製奧運五環

<html> <head> <title>初識canvas</title> </head> <body> <canvas id="mc" width="400px" height

在Android上用Canvas繪製音訊波形圖

最近在研究VAD演算法，但調整引數時無法實時看到效果，於是決定將音訊波形實時繪製出來，並且語音部分和噪音部分用不同顏色的線條顯示，這樣就能立即看到VAD演算法對各種噪音型別的魯棒性為了簡化問題規模，先研究出怎麼在Android下實時繪製隨機生成波形的功能，後面再加入語音獲

基於HTML5 Canvas繪製的支援手勢縮放的室內地圖

你是否有過這樣的經歷，在大型的商圈、商場中傻傻找不到路。嗯，室內地圖就這樣應運而生了。百度地圖、高德地圖等都提供了室內地圖的功能，高德地圖最近還把室內地圖的API開放了。室內地圖的導航、定位功能一定是未來幾年非常有前途的一件事。本文提供了一種基於HTML5

arcgis api for js入門開發系列二十一用HTML5 canvas繪製地圖瓦片載入平移縮放

終於開始可以寫程式碼了，手都開始癢了。這裡的程式碼僅僅是在chrome檢測過，我可以肯定的是IE10以下瀏覽器是行不通，我一直在考慮，是不是使用IE禁止看我的篇部落格，就是這群使用IE的人，給我加了很多工作量。一個地圖的基本動作，無非就是載入資料，

html5 canvas 繪製橫線豎線時不清晰的解決辦法

在繪製一個Tip模樣的圖案時遇到了令人鬱悶的事情：當lineHeight為1時，斜線都很清晰，唯獨橫線和豎線不清晰，目測佔了兩個畫素，而且透明度都被減半；如圖：，後來經過查資料，終於知道，畫布上的座標並未對應網頁裡的畫素，假如我們要在10,10這個點畫橫線到100,10，

html5 canvas 繪製曲線圖

程式碼： <!Doctype Html> <html> <head> <title>Line Chart Demo</title> <meta http-equiv="Content-T

Html5 canvas 繪製彩票走勢圖

相關推薦