网站的最近浏览 怎么做,长沙网站 建设推广世云网络,深圳福田公司,word用来做网站的Hello#xff0c;大家好#xff01; 小W复活啦#xff01;继续欢乐的给大家更博#xff0c;输送新知识~~ 不开玩笑啦#xff01;秒进正题~~~ 上次更博#xff0c;小W给大家介绍了Canvas画布的基础部分#xff0c;以及实现了一个由7*10点阵图显示的倒计时的基本架构。 上…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 14141 15 1间隔 renderDigit( MARGIN_LEFT 15*(RADIUS1) , MARGIN_TOP , parseInt(hours%10) , cxt );// 冒号 4*21 9 digit.js中 10代表 renderDigit( MARGIN_LEFT 30*(RADIUS1) , MARGIN_TOP , 10 , cxt );// 分钟 renderDigit( MARGIN_LEFT 39*(RADIUS1) , MARGIN_TOP , parseInt(minute/10) , cxt );renderDigit( MARGIN_LEFT 54*(RADIUS1) , MARGIN_TOP , parseInt(minute%10) , cxt );renderDigit( MARGIN_LEFT 69*(RADIUS1) , MARGIN_TOP , 10 , cxt );// 秒renderDigit( MARGIN_LEFT 78*(RADIUS1) , MARGIN_TOP , parseInt(second/10) , cxt );renderDigit( MARGIN_LEFT 93*(RADIUS1) , 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( xj * 2 * (RADIUS1) (RADIUS1) , yi * 2 * (RADIUS1) (RADIUS1) , 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 ret0 ? 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 ret0 ? 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*(RADIUS1) , MARGIN_TOP , parseInt(hours%10) , cxt );// 冒号 4*21 9 digit.js中 10代表 renderDigit( MARGIN_LEFT 30*(RADIUS1) , MARGIN_TOP , 10 , cxt );// 分钟 renderDigit( MARGIN_LEFT 39*(RADIUS1) , MARGIN_TOP , parseInt(minute/10) , cxt );renderDigit( MARGIN_LEFT 54*(RADIUS1) , MARGIN_TOP , parseInt(minute%10) , cxt );// 冒号 4*21 9 digit.js中 10代表 renderDigit( MARGIN_LEFT 69*(RADIUS1) , MARGIN_TOP , 10 , cxt );// 秒renderDigit( MARGIN_LEFT 78*(RADIUS1) , MARGIN_TOP , parseInt(second/10) , cxt );renderDigit( MARGIN_LEFT 93*(RADIUS1) , 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( xj * 2 * (RADIUS1) (RADIUS1) , yi * 2 * (RADIUS1) (RADIUS1) , RADIUS , 0 , 2*Math.PI );cxt.closePath(); cxt.fill(); } } }
} 转载于:https://www.cnblogs.com/Tracey-1023/p/7667878.html
