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

最新推荐文章于 2024-06-15 11:34:22 发布
最新推荐文章于 2024-06-15 11:34:22 发布
阅读量215 收藏
点赞数
分类专栏： 前端 文章标签： html5 倒计时
原文链接：https://www.mk2048.com/blog/blog.php?id=hbjcjcikc21j&title=%5Bjs%E9%AB%98%E6%89%8B%E4%B9%8B%E8%B7%AF%5D+html5+canvas%E6%95%99%E7%A8%8B+-+%E5%88%B6%E4%BD%9C%E4%B8%80%E4%B8%AA%E6%95%B0%E7%A0%81%E5%80%92%E8%AE%A1%E6%97%B6%E6%95%88%E6%9E%9C
版权

效果图：

这个实例主要注意:

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>

 


这里要注意一下，如果当前时间超过2017年10月10日15:30:02分就没有效果了，你需要把这个剩余时间设置比你当前的时间大几天就可以了
 
 
我爱丁丁猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5倒计时制作酷炫的canvas粒子动画倒计时代码
11-10
html5倒计时制作酷炫的canvas粒子动画倒计时代码 html5倒计时制作酷炫的canvas粒子动画倒计时代码 html5倒计时制作酷炫的canvas粒子动画倒计时代码
html5 canvas 倒计时,html5 canvas 倒计时
weixin_39940714的博客
06-29 155
Canvasvar currentSeconds = 10;var countDownSeconds = 10;var interval_id = setInterval("drawDoubleCircle()", 1000);function drawDoubleCircle() {if (currentSeconds <= 0) {clearInterval(interval_id);}...
html5 canvas 实现倒计时 功能
dichengcan3810的博客
07-27 356
function showTime(a) { var b = { id: "showtime", //canvasid x: 60, //中心点坐标 X轴; y: 60, //中心点坐标 Y轴; ...
基于HTML5 canvas圆形倒计时器jQuery插件
souhugirl的专栏
02-12 2141
这是一款基于html5 canvas的圆形倒计时器jQuery插件。它可以使你非常轻松的创建圆形的倒计时器。该jQuery倒计时器插件有12种themes，它们基于 HTML5 canvas 来渲染各种圆环。 这个jQuery环形倒计时器插件依赖于jquery.knob.js和jquery.throttle.js两个外部插件。 在线演示：http://www.htmleaf.com
元旦倒计时代码+（HTML+css+JavaScript + canvas）写的一个 2023 年跨年倒计时代码
01-13
前端语言（HTML+css+JavaScript + canvas）写的一个 2023 年跨年倒计时代码 倒计时日期格式：月-日-时-分-秒 也可以自定义日期格式 自定义添加祝福语等 代码时按照元旦作为计算日期 也可以按照农历新年作为日期格式
js html5 canvas制作多个小球碰撞的动画效果
11-07
js html5 canvas制作多个小球碰撞的动画效果 js html5 canvas制作多个小球碰撞的动画效果
html5 canvas-2.用canvas制作一个猜字母的小游戏
01-21
今天我们要用canvas制作一个猜字母的小游戏，先来张效果图。 游戏设计很简单，系统会随机从a-z的26个字母中选择一个保存起来，你键盘输入一个字母，系统会提示你正确字符比你当前输入字母小还是大，直到你输入正确的...
canvas-text-editor-tutorial:使用html5 canvas的简单文本编辑器
05-25
我将尝试通过创建一系列教程来解决此问题，以说明文本编辑器的所有重要方面，同时使用HTML5 canvas和许多JavaScript代码创建可用的应用程序。 以下是按优先级排列的编辑器功能要求列表： 键盘光标导航和选择； ...
HTML5 canvas画布写炫彩动态的倒计时效果
weixin_33898876的博客
09-23 185
html代码如下，插入了2个js代码。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>canvas</title> 5 </head> 6 <body> 7 <canvas id="canvas" style="b...
canvas倒计时
08-06
炫丽的倒计时效果Canvas绘图与动画基础
h5 canvas绘制电子数字时钟
henly1217的专栏
01-12 438
使用h5的canvas绘制电子数字时钟
更新——Canvas画布动画效果之实现倒计时
weixin_30408309的博客
10-14 188
Hello，大家好！ 小W复活啦！继续欢乐的给大家更博，输送新知识~~ 不开玩笑啦！秒进正题~~~ 上次更博，小W给大家介绍了Canvas画布的基础部分，以及实现了一个由7*10点阵图显示的倒计时的基本架构。 上次的效果如下图所示，仅仅只是一个时间的静态显示而已： 今天呢，小W想实现就是，让它开始倒计时！效果先给大家看一下： Canvas画布用于图形的绘制、动画，都是通过脚本（...
html5 canvas 倒计时,逼真的HTML5 canvas模拟时钟特效
weixin_28994403的博客
06-29 154
插件描述：thooClock是一款效果非常逼真的HTML5 canvas模拟时钟特效。该时钟特效使用jQuery和HTML5 Canvas API来制作，模拟现实生活中的时钟。并且它还具有定时闹钟的功能。使用该模拟时钟插件首先需要引入jQuery和jquery.thooClock.js文件。可以使用一个空的来作为时钟的容器。在页面DOM元素加载完毕之后，可以通过thooClock()方法来初始化该...
html5 canvas 倒计时,canvas环形倒计时组件的示例代码
weixin_42401356的博客
06-29 353
本文介绍了canvas环形倒计时组件的示例代码，分享给大家，具体如下：效果如下图一：Canvas环形倒计时组件Canvas环形倒计时是基于Canvas实现的倒计时，建议于移动端使用一、如何使用1. html代码ID属性可随意取名2. 引入process.js文件页面引用3. 初始化参数实例化即可window.onload = function () {let ctd = new Countdown...
html5在线考试倒计时,html5 canvas 实现倒计时 功能
weixin_30246833的博客
06-04 1148
function showTime(a) {var b = {id: "showtime", //canvasidx: 60, //中心点坐标 X轴;y: 60, //中心点坐标 Y轴;radius: 60, //圆的半径angle: 0, //角度 无需设置linewidth: 6, //线的宽度backround: "#d65554", //倒计时背景色color: "#e4e4e4", //...
【前端】HTML5基础
最新发布
Sig的博客
06-15 488
详细介绍HTML5基础
HTML5的未来：掌握最新技术，打造炫酷网页体验
仰望苍穹
06-15 625
HTML5不仅为网页开发者提供了丰富的工具，还极大地提升了网页的交互性和用户体验。通过掌握上述技术，结合响应式设计和多媒体支持，开发者可以创造出更加炫酷的网页体验。随着技术的不断进步，HTML5将继续成为未来网页开发的基石。码克疯v1 | 技术界的疯狂探索者 | 在代码的宇宙中，我是那颗永不满足的探索星。
HTML5拖放（Drag and Drop）全面指南：让网页互动起来
艾恩小灰灰的博客
06-06 820
HTML5 引入了许多令人兴奋的新特性，其中之一便是原生支持的拖放（Drag and Drop）功能，它极大地丰富了网页的交互体验，允许用户直接在页面上通过鼠标操作来移动元素。本文将深入浅出地介绍如何在你的网页中实现拖放功能，包括基本概念、API使用、事件处理以及代码示例。
canvas制作倒计时炫丽效果
05-17
好的，以下是一个简单的canvas倒计时炫丽效果的示例代码，你可以根据自己的需求进行修改和优化： HTML代码： ```html <canvas id="canvas" width="300" height="300"></canvas> ``` JavaScript代码： ```javascript var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var width = canvas.width; var height = canvas.height; var endTime = new Date(2022, 1, 1, 0, 0, 0); // 设置倒计时结束时间 var interval = 1000; // 倒计时更新间隔 var colors = ["#FF0000", "#FFA500", "#FFFF00", "#008000", "#0000FF", "#4B0082", "#EE82EE"]; // 渐变颜色数组 function draw() { var now = new Date(); // 获取当前时间 var remaining = endTime - now; // 计算剩余时间 if (remaining < 0) { // 如果剩余时间为负数，停止倒计时 clearInterval(intervalId); return; } ctx.clearRect(0, 0, width, height); // 清空画布 var seconds = Math.floor(remaining / 1000); // 计算剩余秒数 var minutes = Math.floor(seconds / 60); // 计算剩余分钟数 var hours = Math.floor(minutes / 60); // 计算剩余小时数 var days = Math.floor(hours / 24); // 计算剩余天数 seconds %= 60; // 计算剩余秒数 minutes %= 60; // 计算剩余分钟数 hours %= 24; // 计算剩余小时数 var time = days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒"; // 格式化剩余时间 ctx.font = "bold 30px Arial"; // 设置字体 ctx.fillStyle = "#FFFFFF"; // 设置字体颜色 ctx.fillText(time, 50, 150); // 绘制剩余时间文字 var gradient = ctx.createLinearGradient(0, 0, width, height); // 创建渐变对象 for (var i = 0; i < colors.length; i++) { gradient.addColorStop(i / (colors.length - 1), colors[i]); // 添加渐变颜色 } ctx.beginPath(); // 开始绘制圆形进度条 ctx.arc(150, 150, 100, -Math.PI / 2, (2 * Math.PI * remaining / (endTime - now)) - Math.PI / 2, false); ctx.strokeStyle = gradient; // 设置进度条颜色为渐变色 ctx.lineWidth = 10; // 设置进度条宽度 ctx.stroke(); // 绘制进度条 } var intervalId = setInterval(draw, interval); // 开始倒计时 ``` 在上面的示例代码中，我们使用canvas绘制了一个倒计时炫丽效果，具体来说，我们： 1. 在HTML中添加了一个canvas元素并设置了它的宽度和高度； 2. 在JavaScript中获取了canvas元素和它的上下文对象ctx，并设置了倒计时结束时间endTime、倒计时更新间隔interval、渐变颜色数组colors等变量； 3. 定义了一个绘制函数draw，它会在每次更新时被调用； 4. 在draw函数中，我们首先获取当前时间now，然后计算出剩余时间remaining，如果剩余时间小于0，则停止倒计时； 5. 接着，我们清空画布，计算出剩余天数、小时数、分钟数和秒数，并格式化剩余时间； 6. 我们使用ctx.fillText方法绘制剩余时间文字，并使用ctx.createLinearGradient方法创建渐变对象gradient，并将渐变颜色添加到它里面； 7. 最后，我们使用ctx.arc方法绘制圆形进度条，并设置进度条颜色为渐变色，绘制进度条。 你可以根据自己的需求和喜好修改绘制函数的各个参数和细节，例如改变字体、字体颜色、进度条宽度、渐变颜色等，以达到更好的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值