更新——Canvas画布动画效果之实现倒计时
Hello,大家好!
小W复活啦!继续欢乐的给大家更博,输送新知识~~
不开玩笑啦!秒进正题~~~
上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基本架构。
上次的效果如下图所示,仅仅只是一个时间的静态显示而已:
今天呢,小W想实现就是,让它开始倒计时!效果先给大家看一下:
Canvas画布用于图形的绘制、动画,都是通过脚本(JavaScript)实现的。
上次更博,countdown.js代码中,已经实现了时:分:秒的基本架构,先把上次的JS代码再次梳理一下,在这个基础上,小W再进行接下来的操作:
// 全局变量 有助于后期数据的变动更改 var WINDOW_WIDTH = 1024; var WINDOW_HEIGHT = 768; // 此处需要注意宽高的比例 适当缩小放大画布的时候,尽量同时缩小放大,避免出现圆形显示为椭圆形等不对称现象 var MARGIN_LEFT = 30; var MARGIN_TOP = 60; var RADIUS = 8;window.onload = function(){var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");canvas.width = WINDOW_WIDTH;canvas.height = WINDOW_HEIGHT;render( context ); }function render( cxt ){var hours = 12;var minute = 36;var second = 59;// 小时 为了显示效果好看、设置居中,给每个数字设置marginrenderDigit( MARGIN_LEFT , MARGIN_TOP , parseInt(hours/10) , cxt ); // 每个字水平点阵个数为直径7,半径:7*2 = 14,14+1 = 15 (1间隔) renderDigit( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(hours%10) , cxt );// 冒号 (4*2+1)= 9 digit.js中 10代表 :renderDigit( MARGIN_LEFT+ 30*(RADIUS+1) , MARGIN_TOP , 10 , cxt );// 分钟 renderDigit( MARGIN_LEFT+ 39*(RADIUS+1) , MARGIN_TOP , parseInt(minute/10) , cxt );renderDigit( MARGIN_LEFT+ 54*(RADIUS+1) , MARGIN_TOP , parseInt(minute%10) , cxt );renderDigit( MARGIN_LEFT+ 69*(RADIUS+1) , MARGIN_TOP , 10 , cxt );// 秒renderDigit( MARGIN_LEFT+ 78*(RADIUS+1) , MARGIN_TOP , parseInt(second/10) , cxt );renderDigit( MARGIN_LEFT+ 93*(RADIUS+1) , MARGIN_TOP , parseInt(second%10) , cxt ); }function renderDigit(x , y , num , cxt){ // X轴坐标、Y轴坐标、将要显示的数字、canvas上下文语境
cxt.fillStyle = "#005588"; for (var i = 0 ; i < digit[num].length ;i++) { for (var j = 0 ; j < digit[num][i].length ;j++){ if(digit[num][i][j] == 1){ cxt.beginPath(); // 圆心位置公式 cxt.arc( x+j * 2 * (RADIUS+1) + (RADIUS+1) , y+i * 2 * (RADIUS+1) + (RADIUS+1) , RADIUS , 0 , 2*Math.PI ); cxt.closePath(); cxt.fill(); } } } }
梳理完成之后我们可以进行下一步操作了,首先,我们需要设置一个截止时间,倒计时就是从现在开始到截止时间所剩余的时间:
//限制: 小时二位数 不超过4天 var endTime = new Date(2017,9,15,18,15,26); // 注意!!!:data中的参数第二个表示月份,是由0-11表示的。0 - 一月;11- 十二月
这里需要注意,我们在之前调取小时hours的位数的时候,仅仅只是设置了两位数,因而现在我们的倒计时最多到99:99:99,也就是四天。如果有读者需要实现更长时间的倒计时,需要再做些许调整,为了效果美观整洁,我们这里只设置两位数。使用JS提供的data()方式设置截止时间。
在render函数中,如何获取当前时间距离截止时间剩余时间?
JS的data对象给我们提供了一个getTime的方法:它返回了距离1970.1.1的00:00:00的毫秒数,用这个方法减去截止日期的getTime(),这个差值就表示中间我们需要倒计时的小时、分钟和秒数,但是由于时间是一秒一秒变动的,这个动画效果需要不断的与当前时间作比较,为此我们设计一个全局的变量,来表示现在倒计时需要多少秒?
var curShowTimeSecond = 0; // 现在倒计时需要多少毫秒, —— > 秒
接下来,对 curShowTimeSecond 进行具体的计算:
curShowTimeSecond = getCurShowTimeSecond(); // 封装一个函数
// javascript Date 提供了 getTime 函数 以便于获取实时时间 // getCurShowTimeSecond 函数 获取当前总共的毫秒数 function getCurShowTimeSecond(){var curTime = new Date(); // 获取当前的时间是多少var ret = endTime.getTime() - curTime.getTime(); //ret 获取截止时间与当前时间相差的毫秒数ret = Math.round( ret/1000 ); // 将毫秒转换成秒return ret>=0 ? ret : 0; // 判断 ret,倒计时结束,函数返回0. }
现在,剩余时间的秒数已经得到了,我们接下来需要设置小时、分钟、秒数的显示:
var hours = parseInt( curShowTimeSecond/3600 ); // 剩余时间有多少个小时var minute = parseInt( (curShowTimeSecond - hours * 3600) / 60 ); // 减去小时,剩余时间的分钟数var second = curShowTimeSecond % 60; // 减去小时、分钟后,剩余时间还剩多少秒
到这里,在浏览器的刷新后,倒计时可以实现实时更新了。
然而我们想要实现的是让它自己更新、变化,实现倒计时,接下来我们需要引入一个实现动画的基础函数——定时器setInterval() 方法:
// 动画效果 setInterval(function(){render( context ); // 绘制当前的画面。update(); // 根据绘制画面所需要的数据结构,对数据结构进行调整。},50 // 毫秒);
其实,我们可以直接获取新的时间在render()里面进行绘制就可以了,但是这个最终的效果是想要实现,随着时间变化,产生彩色小球的物理变化的动画,因为为了铺垫后文,我们使用了一个update() 函数,如下图所示:
// 时间更新函数 function update(){// 注意 render 里面是绘制curShowTimeSecond var nextShowTimeSecond = getCurShowTimeSecond(); // 下一次// 下一次要显示的时间(时\分\秒分解) var nextHours = parseInt( nextShowTimeSecond/3600 ); var nextMinute = parseInt( (nextShowTimeSecond - nextHours * 3600) / 60 ); var nextSecond = nextShowTimeSecond % 60;var curtHours = parseInt( curShowTimeSecond/3600 ); var curtMinute = parseInt( (curShowTimeSecond - curtHours * 3600) / 60 ); var curtSecond = curShowTimeSecond % 60;if(nextSecond != curtSecond) // 下一次显示的秒数不等于当前显示的秒数了,替换为新的时间curShowTimeSecond = nextShowTimeSecond; }
为了避免当前新图像,与之前的图像叠加,我们在render()里面引入一个新的函数:
// 为避免新一次的图像与之前的图像叠加。 // clearRect(): 对一个矩形空间内的图像进行一次刷新操作。这里,对整个屏幕进行一次操作、刷新。cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
到这里我们今天的效果已经基本实现了。
后续学习后,还会继续更新,与大家分享...希望可以多多关注!
如果有任何问题,大家可以提出来,小W同大家一起解决,有何不妥的地方也请大神多多指教,这次的博文就到这了,谢谢大家!
附完整countdown.js代码
var WINDOW_WIDTH = 1024; var WINDOW_HEIGHT = 768; var MARGIN_LEFT = 30; var MARGIN_TOP = 60; var RADIUS = 8;//限制: 小时二位数 不超过4天 var endTime = new Date(2017,9,15,18,15,26); // 注意!!!:data中的参数第二个表示月份,是由0-11表示的。0 - 一月;11- 十二月 var curShowTimeSecond = 0; // 现在倒计时需要多少毫秒 window.onload = function(){var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");canvas.width = WINDOW_WIDTH;canvas.height = WINDOW_HEIGHT;curShowTimeSecond = getCurShowTimeSecond(); //curShowTimeSecond:当前总共的毫秒数// 动画效果 setInterval(function(){render( context );update();},50 // 毫秒 );}// javascript 的 Date 提供了 getTime 函数 以便于获取实时时间 // getCurShowTimeSecond 函数 获取当前总共的毫秒数 function getCurShowTimeSecond(){var curTime = new Date(); // 获取当前的时间是多少var ret = endTime.getTime() - curTime.getTime(); //ret 获取截止时间与当前时间相差的毫秒数ret = Math.round( ret/1000 ); // 将毫秒转换成秒return ret>=0 ? ret : 0; // 判断 ret,倒计时结束,函数返回0. }// 时间更新函数 function update(){var nextShowTimeSecond = getCurShowTimeSecond();// 下一次要显示的时间(时分秒分解)var nextHours = parseInt( nextShowTimeSecond/3600 ); var nextMinute = parseInt( (nextShowTimeSecond - nextHours * 3600) / 60 ); var nextSecond = nextShowTimeSecond % 60;var curtHours = parseInt( curShowTimeSecond/3600 ); // 一共需要多少个小时var curtMinute = parseInt( (curShowTimeSecond - curtHours * 3600) / 60 ); var curtSecond = curShowTimeSecond % 60;if(nextSecond != curtSecond) curShowTimeSecond = nextShowTimeSecond;}function render( cxt ){// 为避免新一次的图像与之前的图像叠加。// clearRect(): 对一个矩形空间内的图像进行一次刷新操作。这里,对整个屏幕进行一次刷新。cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);var hours = parseInt( curShowTimeSecond/3600 ); // 一共需要多少个小时var minute = parseInt( (curShowTimeSecond - hours * 3600) / 60 ); var second = curShowTimeSecond % 60;// 小时renderDigit( MARGIN_LEFT , MARGIN_TOP , parseInt(hours/10) , cxt ); // 每个字水平位置直径7,7*2 = 14半径+1 = 15 renderDigit( MARGIN_LEFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(hours%10) , cxt );// 冒号 (4*2+1)= 9 digit.js中 10代表 :renderDigit( MARGIN_LEFT+ 30*(RADIUS+1) , MARGIN_TOP , 10 , cxt );// 分钟 renderDigit( MARGIN_LEFT+ 39*(RADIUS+1) , MARGIN_TOP , parseInt(minute/10) , cxt );renderDigit( MARGIN_LEFT+ 54*(RADIUS+1) , MARGIN_TOP , parseInt(minute%10) , cxt );// 冒号 (4*2+1)= 9 digit.js中 10代表 :renderDigit( MARGIN_LEFT+ 69*(RADIUS+1) , MARGIN_TOP , 10 , cxt );// 秒renderDigit( MARGIN_LEFT+ 78*(RADIUS+1) , MARGIN_TOP , parseInt(second/10) , cxt );renderDigit( MARGIN_LEFT+ 93*(RADIUS+1) , MARGIN_TOP , parseInt(second%10) , cxt ); }function renderDigit(x , y , num , cxt){cxt.fillStyle = "#005588";for (var i = 0 ; i < digit[num].length ;i++) {for (var j = 0 ; j < digit[num][i].length ;j++){if(digit[num][i][j] == 1){cxt.beginPath();// 圆心位置公式cxt.arc( x+j * 2 * (RADIUS+1) + (RADIUS+1) , y+i * 2 * (RADIUS+1) + (RADIUS+1) , RADIUS , 0 , 2*Math.PI );cxt.closePath(); cxt.fill(); } } } }
转载于:https://www.cnblogs.com/Tracey-1023/p/7667878.html
更新——Canvas画布动画效果之实现倒计时相关推荐
- Android属性动画与自定义View——实现vivo x6更新系统的动画效果
晚上好,现在是凌晨两点半,然后我还在写代码.电脑里播放着<凌晨两点半>,晚上写代码,脑子更清醒,思路更清晰. 今天聊聊属性动画和自定义View搭配使用,前面都讲到自定义View和属性动画, ...
- canvas画布--铅笔效果
要求 // 要求鼠标落下时 获取鼠标相对位置 // 鼠标移动时 不停的绘制路径 画到鼠标相对画布的新位置 // 鼠标抬起时 结束绘制 代码如下 在这里插入代码片<!DOCTYPE html> ...
- s时钟画布 android,Canvas画布实现自定义时钟效果
标题 *{margin:0; padding:0; list-style:none;} .box{ width: 420px; height: 420px; margin: 50px auto 0; ...
- html5常用动画效果教程,HTML5教程 8个经典HTML5 Canvas动画学习
本篇教程探讨了HTML5教程 8个经典HTML5 Canvas动画学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < HTML5非常强大,尤其是Canvas ...
- 7 款基于 HTML5 Canvas 的超炫 3D 动画效果
在以前,想要在浏览器中实现3D动画效果是非常困难的,但是自从HTML5诞生之后,这就变得十分简单了.遗憾的是,目前的浏览器对3D渲染效果还不是非常理想,尤其是渲染速度,可能用chrome和safari ...
- html动画效果怎么做成桌面效果,11款效果惊艳的HTML5动画应用
本文作者html5tricks,转载请注明出处 1.HTML5五子棋游戏 画面超酷 可设置难度 前几天我向大家分享过一款HTML5中国象棋游戏,效果令人惊叹,小编的实力很难胜过电脑.今天我要向大家分享 ...
- 在html中加动画效果,教你如何在网页上用H5实现动画效果
在web开发中,GIF动画效果是随处可见,比如常见的loading加载.人物奔跑的gif图片等等,那么这些都是怎么实现的呢? 其实实现的原理很简单,简而言之,这些所谓的动画都是一帧一帧的图片经过一段时 ...
- html5添加flash动画效果,霸气的HTML5 7款无Flash HTML5动画特效
本文作者html5tricks,转载请注明出处 以前我们想在网页上实现一些动画特效,第一选择肯定是Flash,但是现在 1.HTML5 Canvas火焰喷射动画效果 还记得以前分享过的一款HTML5烟 ...
- 教你如何在网页上用H5实现动画效果
在web开发中,GIF动画效果是随处可见,比如常见的loading加载.人物奔跑的gif图片等等,那么这些都是怎么实现的呢? 其实实现的原理很简单,简而言之,这些所谓的动画都是一帧一帧的图片经过一段时 ...
最新文章
- Kubernates集群入门(1)
- 【 FPGA 】四位16进制的数码管动态显示设计
- java 括号匹配_java---括号匹配
- python编程小游戏-10分钟用Python编写一个贪吃蛇小游戏,简单
- 2020-12-29 Linux查找某一关键字在哪个文件
- B站开源自研动漫超分辨率模型,助力动漫UGC视频高清化
- 前端学习(1550):$scope和调试工具
- JavaBean用JSP调用和使用JSP动作标签的区别
- 如何在云服务器使用docker快速部署jupyter web服务器(Nginx+docker+jupyter+tensorflow)
- 错误、调试和测试(4)-文档测试
- matlab绘制均匀b样条曲线,MATLAB绘制B样条曲线
- 手把手教Python使用微信聊天记录生成词云
- 使用C++编写卷积神经网络(一)
- [转载]SAP生产工单结算的差异种类分析
- 【年度总结】于无声处听惊雷-2016年度总结
- 微服初识/优缺点2020-09-03
- 光学雨量计应用降雨量检测
- 黑马C++笔记——STL常用算法
- 一个简单的电子邮箱验证
- 【GPU精粹与Shader编程】 七 一篇文章读完 GPU Gems 3
热门文章
- 五种I/O 模式——阻塞(默认IO模式),非阻塞(常用语管道),I/O多路复用(IO多路复用的应用场景),信号I/O,异步I/O
- 图片不显示问题 图片url监测改变问题
- Libusb开发教程一 安装
- [react] 在react中遍历的方法有哪些?它们有什么区别呢?
- [jQuery] 你有写过jQuery的扩展吗?都有哪些写法?
- [vue] vue变量名如果以_、$开头的属性会发生什么问题?怎么访问到它们的值?
- [css] 请描述css的权重计算规则
- 前端学习(2539):节点类型
- 前端学习(1417):ajax实现步骤
- 前端学习(1002):简洁版滑动下拉菜单问题解决