[js高手之路] html5 canvas教程 - 制作一個數碼倒計時效果

阿新 • • 發佈：2017-10-08

[0 2017年需要 false image 之路 pla left query

效果圖：

技術分享

這個實例主要註意:

1，剩余時間的計算

2，每個時間數字的繪制

時間主要有0-9和一個冒號組成，用數組來表示( 0: 就是不畫圓，1：就是畫一個藍色的圓 )

num.js文件：

  1 var digital =
  2 [
  3     [
  4         [0,0,1,1,1,0,0],
  5         [0,1,1,0,1,1,0],
  6         [1,1,0,0,0,1,1],
  7         [1,1,0,0,0,1,1],
  8         [1,1,0,0,0,1,1],
  9         [1,1,0,0,0,1,1],
 
 10         [1,1,0,0,0,1,1],
 11         [1,1,0,0,0,1,1],
 12         [0,1,1,0,1,1,0],
 13         [0,0,1,1,1,0,0]
 14     ],//0
 15     [
 16         [0,0,0,1,1,0,0],
 17         [0,1,1,1,1,0,0],
 18         [0,0,0,1,1,0,0],
 19         [0,0,0,1,1,0,0],
 20         [0,0,0,1,1,0,0],
 21         [0,0,0,1,1,0,0],
 22         [0,0,0,1,1,0,0],
 
 23         [0,0,0,1,1,0,0],
 24         [0,0,0,1,1,0,0],
 25         [1,1,1,1,1,1,1]
 26     ],//1
 27     [
 28         [0,1,1,1,1,1,0],
 29         [1,1,0,0,0,1,1],
 30         [0,0,0,0,0,1,1],
 31         [0,0,0,0,1,1,0],
 32         [0,0,0,1,1,0,0],
 33         [0,0,1,1,0,0,0],
 34         [0,1,1,0,0,0,0],
 35         [1,1,0,0,0,0,0],
 
 36         [1,1,0,0,0,1,1],
 37         [1,1,1,1,1,1,1]
 38     ],//2
 39     [
 40         [1,1,1,1,1,1,1],
 41         [0,0,0,0,0,1,1],
 42         [0,0,0,0,1,1,0],
 43         [0,0,0,1,1,0,0],
 44         [0,0,1,1,1,0,0],
 45         [0,0,0,0,1,1,0],
 46         [0,0,0,0,0,1,1],
 47         [0,0,0,0,0,1,1],
 48         [1,1,0,0,0,1,1],
 49         [0,1,1,1,1,1,0]
 50     ],//3
 51     [
 52         [0,0,0,0,1,1,0],
 53         [0,0,0,1,1,1,0],
 54         [0,0,1,1,1,1,0],
 55         [0,1,1,0,1,1,0],
 56         [1,1,0,0,1,1,0],
 57         [1,1,1,1,1,1,1],
 58         [0,0,0,0,1,1,0],
 59         [0,0,0,0,1,1,0],
 60         [0,0,0,0,1,1,0],
 61         [0,0,0,1,1,1,1]
 62     ],//4
 63     [
 64         [1,1,1,1,1,1,1],
 65         [1,1,0,0,0,0,0],
 66         [1,1,0,0,0,0,0],
 67         [1,1,1,1,1,1,0],
 68         [0,0,0,0,0,1,1],
 69         [0,0,0,0,0,1,1],
 70         [0,0,0,0,0,1,1],
 71         [0,0,0,0,0,1,1],
 72         [1,1,0,0,0,1,1],
 73         [0,1,1,1,1,1,0]
 74     ],//5
 75     [
 76         [0,0,0,0,1,1,0],
 77         [0,0,1,1,0,0,0],
 78         [0,1,1,0,0,0,0],
 79         [1,1,0,0,0,0,0],
 80         [1,1,0,1,1,1,0],
 81         [1,1,0,0,0,1,1],
 82         [1,1,0,0,0,1,1],
 83         [1,1,0,0,0,1,1],
 84         [1,1,0,0,0,1,1],
 85         [0,1,1,1,1,1,0]
 86     ],//6
 87     [
 88         [1,1,1,1,1,1,1],
 89         [1,1,0,0,0,1,1],
 90         [0,0,0,0,1,1,0],
 91         [0,0,0,0,1,1,0],
 92         [0,0,0,1,1,0,0],
 93         [0,0,0,1,1,0,0],
 94         [0,0,1,1,0,0,0],
 95         [0,0,1,1,0,0,0],
 96         [0,0,1,1,0,0,0],
 97         [0,0,1,1,0,0,0]
 98     ],//7
 99     [
100         [0,1,1,1,1,1,0],
101         [1,1,0,0,0,1,1],
102         [1,1,0,0,0,1,1],
103         [1,1,0,0,0,1,1],
104         [0,1,1,1,1,1,0],
105         [1,1,0,0,0,1,1],
106         [1,1,0,0,0,1,1],
107         [1,1,0,0,0,1,1],
108         [1,1,0,0,0,1,1],
109         [0,1,1,1,1,1,0]
110     ],//8
111     [
112         [0,1,1,1,1,1,0],
113         [1,1,0,0,0,1,1],
114         [1,1,0,0,0,1,1],
115         [1,1,0,0,0,1,1],
116         [0,1,1,1,0,1,1],
117         [0,0,0,0,0,1,1],
118         [0,0,0,0,0,1,1],
119         [0,0,0,0,1,1,0],
120         [0,0,0,1,1,0,0],
121         [0,1,1,0,0,0,0]
122     ],//9
123     [
124         [0,0,0,0],
125         [0,0,0,0],
126         [0,1,1,0],
127         [0,1,1,0],
128         [0,0,0,0],
129         [0,0,0,0],
130         [0,1,1,0],
131         [0,1,1,0],
132         [0,0,0,0],
133         [0,0,0,0]
134     ]//:
135 ];

View Code

倒計時實現：

 1 <head>
 2     <meta charset=‘utf-8‘ />
 3     <style>
 4         #canvas {
 5             border: 1px dashed #aaa;
 6         }
 7     </style>
 8     <script src="./num.js"></script>
 9     <script>
10         window.onload = function () {
11             var oCanvas = document.querySelector("#canvas"),
12                 oGc = oCanvas.getContext(‘2d‘),
13                 width = oCanvas.width, height = oCanvas.height,
14                 radius = 10,
15                 leftTime = 0,
16                 endTime = new Date( 2017, 09, 10, 15, 30, 02 );
17             
18             leftTime = getLeftTime();
19             showTime( oGc );
20             setInterval(function(){
21                 oGc.clearRect( 0, 0, width, height );
22                 leftTime = getLeftTime();
23                 showTime( oGc );
24             }, 1000);
25 
26             function showTime( cxt ){
27                 var hour = parseInt( leftTime / 3600 );
28                 var min = parseInt( ( leftTime - hour * 3600 ) / 60 );
29                 var sec = leftTime % 60;
30 
31                 showNum( 0, 0, parseInt( hour / 10 ), cxt );
32                 showNum( 15 * ( radius + 1 ), 0, parseInt( hour % 10 ), cxt );
33                 showNum( 30 * ( radius + 1 ), 0, 10, cxt );
34                 showNum( 39 * ( radius + 1 ), 0, parseInt( min / 10 ), cxt );
35                 showNum( 54 * ( radius + 1 ), 0, parseInt( min % 10 ), cxt );
36                 showNum( 69 * ( radius + 1 ), 0, 10, cxt );
37                 showNum( 78 * ( radius + 1 ), 0, parseInt( sec / 10 ), cxt );
38                 showNum( 93 * ( radius + 1 ), 0, parseInt( sec % 10 ), cxt );
39             }
40 
41             function getLeftTime(){
42                 var curTime = new Date();
43                 var restTime = endTime.getTime() - curTime.getTime();
44                 restTime = Math.round( restTime / 1000 );
45                 return restTime > 0 ? restTime : 0;
46             }
47 
48             //顯示時間的每一位
49             function showNum( x, y, num, cxt ){
50                 cxt.fillStyle = ‘#09f‘;
51                 for( var i = 0; i < digital[num].length; i++ ){
52                     for( var j = 0; j < digital[num][i].length; j++ ){
53                         if ( digital[num][i][j] == 1 ){
54                             cxt.beginPath();
55                             cxt.arc( x + j * 2 * ( radius + 1 ) + ( radius + 1 ), y + i * 2 * ( radius + 1 ) + ( radius + 1 ), radius, 0, + 360 * Math.PI / 180, false );
56                             cxt.closePath();
57                             cxt.fill();
58                         }
59                     }
60                 }
61             }
62         }
63     </script>
64 </head>
65 <body>
66     <canvas id="canvas" width="1200" height="300"></canvas>
67 </body>

<head>
    <meta charset=‘utf-8‘ />
    <style>
        #canvas {
            border: 1px dashed #aaa;
        }
    </style>
    <script>
        var digital =
[
    [
        [0,0,1,1,1,0,0],
        [0,1,1,0,1,1,0],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,0,1,1,0],
        [0,0,1,1,1,0,0]
    ],//0
    [
        [0,0,0,1,1,0,0],
        [0,1,1,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [1,1,1,1,1,1,1]
    ],//1
    [
        [0,1,1,1,1,1,0],
        [1,1,0,0,0,1,1],
        [0,0,0,0,0,1,1],
        [0,0,0,0,1,1,0],
        [0,0,0,1,1,0,0],
        [0,0,1,1,0,0,0],
        [0,1,1,0,0,0,0],
        [1,1,0,0,0,0,0],
        [1,1,0,0,0,1,1],
        [1,1,1,1,1,1,1]
    ],//2
    [
        [1,1,1,1,1,1,1],
        [0,0,0,0,0,1,1],
        [0,0,0,0,1,1,0],
        [0,0,0,1,1,0,0],
        [0,0,1,1,1,0,0],
        [0,0,0,0,1,1,0],
        [0,0,0,0,0,1,1],
        [0,0,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,1,1,1,0]
    ],//3
    [
        [0,0,0,0,1,1,0],
        [0,0,0,1,1,1,0],
        [0,0,1,1,1,1,0],
        [0,1,1,0,1,1,0],
        [1,1,0,0,1,1,0],
        [1,1,1,1,1,1,1],
        [0,0,0,0,1,1,0],
        [0,0,0,0,1,1,0],
        [0,0,0,0,1,1,0],
        [0,0,0,1,1,1,1]
    ],//4
    [
        [1,1,1,1,1,1,1],
        [1,1,0,0,0,0,0],
        [1,1,0,0,0,0,0],
        [1,1,1,1,1,1,0],
        [0,0,0,0,0,1,1],
        [0,0,0,0,0,1,1],
        [0,0,0,0,0,1,1],
        [0,0,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,1,1,1,0]
    ],//5
    [
        [0,0,0,0,1,1,0],
        [0,0,1,1,0,0,0],
        [0,1,1,0,0,0,0],
        [1,1,0,0,0,0,0],
        [1,1,0,1,1,1,0],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,1,1,1,0]
    ],//6
    [
        [1,1,1,1,1,1,1],
        [1,1,0,0,0,1,1],
        [0,0,0,0,1,1,0],
        [0,0,0,0,1,1,0],
        [0,0,0,1,1,0,0],
        [0,0,0,1,1,0,0],
        [0,0,1,1,0,0,0],
        [0,0,1,1,0,0,0],
        [0,0,1,1,0,0,0],
        [0,0,1,1,0,0,0]
    ],//7
    [
        [0,1,1,1,1,1,0],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,1,1,1,0],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,1,1,1,0]
    ],//8
    [
        [0,1,1,1,1,1,0],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [1,1,0,0,0,1,1],
        [0,1,1,1,0,1,1],
        [0,0,0,0,0,1,1],
        [0,0,0,0,0,1,1],
        [0,0,0,0,1,1,0],
        [0,0,0,1,1,0,0],
        [0,1,1,0,0,0,0]
    ],//9
    [
        [0,0,0,0],
        [0,0,0,0],
        [0,1,1,0],
        [0,1,1,0],
        [0,0,0,0],
        [0,0,0,0],
        [0,1,1,0],
        [0,1,1,0],
        [0,0,0,0],
        [0,0,0,0]
    ]//:
];
    </script>
    <script>
        window.onload = function () {
            var oCanvas = document.querySelector("#canvas"),
                oGc = oCanvas.getContext(‘2d‘),
                width = oCanvas.width, height = oCanvas.height,
                radius = 10,
                leftTime = 0,
                endTime = new Date( 2017, 09, 10, 15, 30, 02 );
            
            leftTime = getLeftTime();
            showTime( oGc );
            setInterval(function(){
                oGc.clearRect( 0, 0, width, height );
                leftTime = getLeftTime();
                showTime( oGc );
            }, 1000);

            function showTime( cxt ){
                var hour = parseInt( leftTime / 3600 );
                var min = parseInt( ( leftTime - hour * 3600 ) / 60 );
                var sec = leftTime % 60;

                showNum( 0, 0, parseInt( hour / 10 ), cxt );
                showNum( 15 * ( radius + 1 ), 0, parseInt( hour % 10 ), cxt );
                showNum( 30 * ( radius + 1 ), 0, 10, cxt );
                showNum( 39 * ( radius + 1 ), 0, parseInt( min / 10 ), cxt );
                showNum( 54 * ( radius + 1 ), 0, parseInt( min % 10 ), cxt );
                showNum( 69 * ( radius + 1 ), 0, 10, cxt );
                showNum( 78 * ( radius + 1 ), 0, parseInt( sec / 10 ), cxt );
                showNum( 93 * ( radius + 1 ), 0, parseInt( sec % 10 ), cxt );
            }

            function getLeftTime(){
                var curTime = new Date();
                var restTime = endTime.getTime() - curTime.getTime();
                restTime = Math.round( restTime / 1000 );
                return restTime > 0 ? restTime : 0;
            }

            //顯示時間的每一位
            function showNum( x, y, num, cxt ){
                cxt.fillStyle = ‘#09f‘;
                for( var i = 0; i < digital[num].length; i++ ){
                    for( var j = 0; j < digital[num][i].length; j++ ){
                        if ( digital[num][i][j] == 1 ){
                            cxt.beginPath();
                            cxt.arc( x + j * 2 * ( radius + 1 ) + ( radius + 1 ), y + i * 2 * ( radius + 1 ) + ( radius + 1 ), radius, 0, + 360 * Math.PI / 180, false );
                            cxt.closePath();
                            cxt.fill();
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="1200" height="300"></canvas>
</body>

這裏要註意一下，如果當前時間超過2017年10月10日15:30:02分就沒有效果了，你需要把這個剩余時間設置比你當前的時間大幾天就可以了

[js高手之路] html5 canvas教程 - 制作一個數碼倒計時效果

[0 2017年需要 false image 之路 pla left query 效果圖：這個實例主要註意: 1，剩余時間的計算 2，每個時間數字的繪制時間主要有0-9和一個冒號組成，用數組來表示( 0: 就是不畫圓，1：就是畫一個藍色的圓 ) num.

[js高手之路]html5 canvas動畫教程 - 自己動手做一個類似windows的畫圖軟件

箭頭 erb 寬度 pow(x type row center shape htm 這個繪圖工具，我還沒有做完，不過已經實現了總架構，以及常見的簡易圖形繪制功能： 1，可以繪制直線，圓，矩形，正多邊形【已完成】 2，填充顏色和描邊顏色的選擇【已完成】 3，描邊和填充功

[js高手之路]深入淺出webpack教程系列2-配置文件webpack.config.js詳解

基本用法 tle webpack 函數 ges 配置 ref 高手之路 pack 接著上文，重新在webpack文件夾下面新建一個項目文件夾demo2，然後用npm init --yes初始化項目的package.json配置文件，然後安裝webpack( npm inst

[js高手之路]深入淺出webpack教程系列3-配置文件webpack.config.js詳解(下)

json 學習所在 npm chunk target get lan cnblogs 本文繼續接著上文，繼續寫下webpack.config.js的其他配置用法. 一、把兩個文件打包成一個，entry怎麽配置? 在上文中的webpack.dev.config.js中，用數

[js高手之路]深入淺出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

技術輸出 js函數動態生成 git tro mon ebp 執行還記得我們上文中的index.html文件嗎? 那裏面的script標簽還是寫死的index.bundle.js文件，那麽怎麽把他們變成動態的index.html文件，這個動態生成的index.html文

[js高手之路]深入淺出webpack教程系列5-插件使用之html-webpack-plugin配置(中)

logs 定義數據 ash con ack move lan ref min 上文我們講到了options的配置和獲取數據的方式，本文，我們繼續深入options的配置一、html-webpack-plugin插件中的options除了自己定義了一些基本配置外，我們是可以

[js高手之路]深入淺出webpack教程系列9-打包圖片(file-loader)用法

圖片 css 文件 alt entry 處理 lan gin style [js高手之路]深入淺出webpack教程系列索引目錄： [js高手之路]深入淺出webpack教程系列1-安裝與基本打包用法和命令參數 [js高手之路]深入淺出webpack教程系列2-配置文件w

[js高手之路] es6系列教程 - Map詳解以及常用api

.com size style 系列教程 image clear rsquo images div ECMAScript 6中的Map類型是一種存儲著許多鍵值對的有序列表。鍵值對支持所有的數據類型. 鍵 0 和 ‘0’會被當做兩個不同的鍵，不會發生強

[js高手之路] es6系列教程 - 叠代器,生成器,for...of,entries,values,keys等詳解

== 我會 item 獲取 prot ron 原型對象檢測 ges 接著上文[js高手之路] es6系列教程 - 叠代器與生成器詳解繼續. 在es6中引入了一個新的循環結構for ....of，主要是用來循環可叠代的對象，那麽什麽是可叠代的對象呢？可叠代的對象一

[js高手之路]Node.js模板引擎教程-jade速學與實戰3-mixin

函數 .cn ima images ade 高手 js模板引擎 ron pan 強大的mixin mixin類似於函數的功能，可以達到模塊復用的效果 mixin show: 定義一個類似函數的功能，名字叫show，裏面的就是他的內容 +show: 調用show，每

[js高手之路]Node.js模板引擎教程-jade速學與實戰2-流程控制,轉義與非轉義

title 學習 != 下一步 cas ase spa back name 一、轉義與非轉義 jade模板文件代碼： 1 doctype html 2 html 3 head 4 meta(charset=‘utf-8‘)

[js高手之路]Node.js模板引擎教程-jade速學與實戰4-模板引用,繼承,插件使用

node.js ade 方法頭部 containe jade bsp 繼承 for 一、block 模塊復用把需要復用的模塊用block定義 block後面跟上模塊的名字，引用一次block 內容就會被復用一次編譯之後的結果：二，繼承模板(exten

[js高手之路]Vue2.0基於vue-cli+webpack父子元件通訊教程

在git命令列下，執行以下命令完成環境的搭建： 1，npm install --global vue-cli 安裝vue命令列工具 2，vue init webpack vue-demo 使用vue命令生成一個webpack專案，專案名稱為vue-demo 3，c

[js高手之路]Vue2.0基於vue-cli+webpack同級元件之間的通訊教程

我們接著上文繼續，本文我們講解兄弟元件的通訊，專案結構還是跟上文一樣. 在src/assets目錄下建立檔案EventHandler.js，該檔案的作用在於給同級元件之間傳遞事件 EventHandler.js程式碼: 1 import Vue from 'Vue'; 2 export defau

[js高手之路]從零開始打造一個javascript開源框架gdom與外掛開發免費視訊教程連載中

具體課程目錄： 1，課程安排【視訊已上傳】 2，gdom框架使用方法【視訊已上傳】 3，變數提升【視訊已上傳】 4，變數提升之同名變數,函式宣告,表示式的提升規則【視訊已上傳】 5，this關鍵字專題詳解【視訊已上傳】 6，物件在記憶體中的表現形式【視訊已上傳】 7，圖解原型物件與隱式原

[js高手之路]var, let, const詳解

兩種控制 ghost 花括號 pre 內部 span lec 同名 1 function show( flag ){ 2 console.log( a ); 3 if( flag ){ 4

[js高手之路] dom常用節點屬性兼容性詳解與應用

asc 子元素種類型 process 變色 tex 如果結構節點和一、每個DOM節點都有一個nodeType屬性，表示節點類型， NodeType一共有12種類型，我們可以通過遍歷內置的Node構造函數獲取 1 window.onload =

[js高手之路]一步步圖解javascript的原型(prototype)對象,原型鏈

create 原型對象 str 對象賦值 div blank type屬性查找 __proto__ 我們接著上文繼續，我們通過原型方式，解決了多個實例的方法共享問題，接下來，我們就來搞清楚原型(prototype)，原型鏈的來龍去脈. 1 functio

[js高手之路]原型對象(prototype)與原型鏈相關屬性與方法詳解

隱式之前 username tar uname create pro getproto .get 一，instanceof： instanceof檢測左側的__proto__原型鏈上，是否存在右側的prototype原型. 我在之前的兩篇文章 [js高手之路]構造函數的基

[js高手之路]使用原型對象(prototype)需要註意的地方

spa ray show 特性之路對象重復 new i++ 我們先來一個簡單的構造函數+原型對象的小程序 1 function CreateObj( uName, uAge ) { 2 this.userName = uN

[js高手之路] html5 canvas教程 - 制作一個數碼倒計時效果

相關推薦