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

效果图:

这个实例主要注意:

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
    评论
好的,以下是一个简单的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、付费专栏及课程。

余额充值