canvas基础绘制-倒计时(上) - 喵嘻嘻

      2020-08-01 20:42      HTML5

效果:

html:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>digit</title></head><body><canvas></canvas><script src="digit_1.js"></script><script src="countdown.js"></script></body></html>

countdown.js:

var WINDOW_WIDTH = 1024;var WINDOW_HEIGHT = 768;var RADIUS = 8;var MARGIN_TOP = 60;var MARGIN_LEFT = 30;const endTime = curShowTimeSeconds = 0;window.onload = function () {var canvas = document.getElementById("canvas");var context = canvas.getContext("2d");canvas.width = WINDOW_WIDTH;canvas.height = WINDOW_HEIGHT;curShowTimeSeconds = getCurrentShowTimeSeconds();setInterval(function () {update();render(context);},50)};function getCurrentShowTimeSeconds() {ret = endTime.getTime()-curTime.getTime();ret = Math.round(ret/1000);//获取秒数差值;return ret>=0?ret:0;}function update() {var nextShowTimeSeconds = getCurrentShowTimeSeconds();var nextHours = parseInt(nextShowTimeSeconds/3600);var nextMinutes = parseInt((nextShowTimeSeconds-nextHours*3600)/60);var nextSeconds = nextShowTimeSeconds%60;var curHours = parseInt(curShowTimeSeconds/3600);var curMinutes = parseInt((curShowTimeSeconds-curHours*3600)/60);var curSeconds = curShowTimeSeconds%60;if(nextSeconds!=curSeconds){curShowTimeSeconds = nextShowTimeSeconds;}}function render(cxt) {//每一帧都要对动画进行刷新,不然就会新的旧的叠在一起;cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);hours = parseInt(curShowTimeSeconds/3600);var minutes = parseInt((curShowTimeSeconds-hours*3600)/60);var seconds = curShowTimeSeconds%60;renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),cxt);renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,cxt);renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),cxt);}function renderDigit(x,y,num,cxt) {cxt.fillStyle = "rgb(0,102,153)";((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();}}}}