[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>
<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
[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强大的像素处理能力,通过像素处理,实现 ...
随机推荐
- Jsoup（一）Jsoup详解（官方）
一.Jsoup概述 1.1.简介 jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API, 可通过DOM,CSS以及类似于jQu ...
- windows10 使用gitblit搭建git服务器
今天在win10上使用gitblit搭建git服务器时被坑了下,因为安装的java9出现不兼容问题,果断卸载重装了jdk8.废话不多说直接进入正题吧: 第一章 前言 使用gitblit搭建git se ...
- 最好用的MongoDB GUI - LivingMongo
LivingMongo是一个mongodb数据库的GUI操作系统,支持对数据字段的修改.数据搜索.集合的分类.索引管理.空间统计.慢查询等 demo地址 : http://living-mongo.k ...
- C#设计模式之二十策略模式（Stragety Pattern）【行为型】
一.引言 今天我们开始讲"行为型"设计模式的第七个模式,该模式是[策略模式],英文名称是:Stragety Pattern.在现实生活中,策略模式的例子也非常常见,例如,在一个 ...
- 从无到有<前端异常监控系统>落地
导火索 有一天一个测试同事的一个移动端页面白屏了,看样子是页面哪里报错了. 我自己打开页面并没有报错,最后发现报错只存在于他的手机,移动端项目又是在微信环境下,调试起来会比较麻烦,最后用他手机调试才 ...
- 载入DLL中的图片资源生成Skia中的SkBitmap对象
PPAPI Plugin在Windows下是DLL,能够嵌入图片文件.使用Skia画图时须要依据DLL里的图片文件生成SkBitmap对象. 以下是代码: #include "utils.h ...
- jsp内置对象 的使用范围和类型【说明】
jsp内置对象 jsp内置对象有以下9种,我们会在后面的章节中分别介绍他们.这9种对象例如以下: 名称 类型 使用范围 request javax.servlet.http.HttpServletRe ...
- 介绍一个法国的时间戳server
特别说明: 以下介绍的法国时间戳server已经停止服务了.我曾发Email给相关站点的管理员.对方回复说他也不知道什么时候能恢复服务,有可能就是遥遥无期了.所以以下的内容仅有參考价值.没法实践了. ...
- js判断一些时间范围是否有重复时间段
function isHasRepeatTime(data) { var startTimeArr = []; var endTimeArr = []; (data || []).map(functi ...
- 后台程序处理 （一）python asyncio 协程使用
由于脚本需要在完成事件处理后N秒检查事件处理结果,当执行失败时再执行另一个事件处理. 想要最小化完成这个功能.同时在第一时间就将执行完毕的结果反馈给接口. 因此想到使用协程. 使用之前先翻阅了一下现有 ...