[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强大的像素处理能力,通过像素处理,实现 ...

随机推荐

Mac下CUDA开启及Tensorflow-gpu安装
本文由@ray 出品,转载请注明出处. 文章链接:http://www.cnblogs.com/wolfray/p/8040694.html 在之前的文章中,笔者介绍了在Mac下安装Tensorfl ...
git上传本地文件到gitlab
The repository for this project is empty If you already have files you can push them using command l ...
POJ 1661 Help Jimmy(DP,注意边界)
Help Jimmy Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 9399 Accepted: 3025 Descri ...
Android中使用ContentProvider进行跨进程方法调用
原文同一时候发表在我的博客点我进入还能看到很多其它需求背景近期接到这样一个需求,须要和别的 App 进行联动交互,比方下载器 App 和桌面 App 进行联动.桌面的 App 能直接显示下载器 ...
opencv批处理提取图像的特征
____________________________________________________________________________________________________ ...
Android中关于JNI 的学习（三）在JNI层訪问Java端对象
前面两篇文章简介了JNI层跟Java层的一些相应关系,包含方法名,数据类型和方法名称等,相信在理论层面.可以非常好地帮助我们去了解JNI在Native本地开发中的作用,对JNI的一些概念也有了一个初步 ...
Linux基础：xargs命令
简介 xargs可以将输入内容(通常通过命令行管道传递),转成后续命令的参数,通常用途有: 命令组合:尤其是一些命令不支持管道输入,比如ls. 避免参数过长:xargs可以通过-nx来将参数分组,避免 ...
使用javaMail和velocity来发送模板邮件
之前在ssh项目中有用过javaMail和velocity来发送邮件,实现的效果如下所示. 这类邮件主要用于公司的推广宣传,比如商城的促销等场景. 今天打算将邮件模块也集成到ssm项目,也算是对之前做 ...
Linux chgrp
在学习兄弟连 linux教学视频的时候,我将所学的 linux 命令记录在我的博客中,方便自己查阅. 权限管理命令: chgrp 基础的命令命令名称:chgrp 命令英文原意:change fi ...
移动端下拉刷新上拉加载-mescroll.js插件
最近无意间看到有这么一个上拉刷新下拉加载的插件 -- mescroll.js,个人感觉挺好用的,官网地址是:http://www.mescroll.com 然后我就看了一下文档,简单的写了一个小dem ...

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

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

随机推荐

热门专题