[js高手之路] html5 canvas教程 - 制作一个数码倒计时效果

效果图：

这个实例主要注意:

1，剩余时间的计算

2，每个时间数字的绘制

时间主要有0-9和一个冒号组成，用数组来表示( 0: 就是不画圆，1：就是画一个蓝色的圆 )

num.js文件：

 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,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]

     ],//

     [

         [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]

     ],//

     [

         [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]

     ],//

     [

         [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]

     ],//

     [

         [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]

     ],//

     [

         [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]

     ],//

     [

         [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]

     ],//

     [

         [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]

     ],//

     [

         [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]

     ],//

     [

         [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]

     ]//:

 ];

倒计时实现：

 <head>

     <meta charset='utf-8' />

     <style>

         #canvas {

             border: 1px dashed #aaa;

         }

     </style>

     <script src="./num.js"></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>

<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>
run code

这里要注意一下，如果当前时间超过2017年10月10日15:30:02分就没有效果了，你需要把这个剩余时间设置比你当前的时间大几天就可以了

[js高手之路] html5 canvas教程 - 制作一个数码倒计时效果的更多相关文章

[js高手之路] html5 canvas教程 - 绘制七巧板
七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. <head> <meta ch ...
[js高手之路]html5 canvas教程 - 1px问题以及绘制坐标系网格
在canvas中,要画出1px的线条,默认情况下是不行的 context.beginPath(); context.moveTo( 100, 100 ); context.lineTo( 400, 1 ...
[js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)
之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...
[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)
绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...
[js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)
接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...
[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)
接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...
[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)
接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

随机推荐

extr_shopping
__author__ = 'ZZG' # noinspection PyCallingNonCallable shopping_list =[ ("iphone",5300), ( ...
Python笔记·第一章—— Python基础（一）
一.Python的简介 1.Python的由来与版本 1.1 python的由来 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文 ...
大白话Vue源码系列(02)：编译器初探
阅读目录编译器代码藏在哪 Vue.prototype.$mount 构建 AST 的一般过程 Vue 构建的 AST 题接上文,上回书说到,Vue 的编译器模块相对独立且简单,那咱们就从这块入手,先 ...
Azure ARM (18) 将传统的ASM VM迁移到ARM VM (1)
<Windows Azure Platform 系列文章目录> 目前很多客户陆续的把传统ASM VM迁移至ARM VM.我这里简单介绍一下. 整个迁移过程分为: 1.Validate,Az ...
赵雅智：service与訪问者之间进行通信，数据交换
服务类中间人:service服务中的bind对象创建中间人并通过onBinder方法的return暴露出去 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...
hdu4893 Wow! Such Sequence!
线段树结点上保存一个一般的sum值,再同一时候保存一个fbsum,表示这个结点表示的一段数字若为斐波那契数时的和当进行3操作时,仅仅用将sum = fbsum就可以其它操作照常进行,仅仅是单点更新 ...
最全Pycharm教程（28）——Pycharm搜索导航之搜索应用实例
1.主题这里我们将介绍Pycharm另外一项强力的搜索导航功能.如果你希望知道某个特定的类或方法都在project中的哪些地方发挥了作用.也就是找出其全部的usages,这将是一个很巨大而繁琐的pr ...
Bootstrap全局CSS样式之排版
Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...
XMPP学习及使用1
XMPP 简单介绍本小节将简要介绍 XMPP,它的起源.以及为何它是一个适合实时 web 通信的协议.您将检查 XMPP 通信设置的组件,并查看展示这些组件怎样使用的演示样例. Web 标准和 XM ...
自己手写WEB程序框架并执行
1.新建目录,起名MyWeb 2.目录下,新建两个目录 WEB-INF, META-INF,,还能够新建一些jsp,html文件 ,如 index.html 3在WEB-INF中必须存在一个文件WEB ...

[js高手之路] html5 canvas教程 - 制作一个数码倒计时效果

[js高手之路] html5 canvas教程 - 制作一个数码倒计时效果的更多相关文章

随机推荐

热门专题