qq_无限之光_0
2019-03-31 21:12
var WINDOW_WIDTH = 1024; var WINDOW_HEIGHT = 768; var RADIUS = 8; var MARGIN_TOP = 60; var MARGIN_LEFT = 30; const endTime = new Date(2019,3,31,12,0,0); var 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() render( context ) } function getCurrentShowTimeSeconds() { var curTime = new Date(); var 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=parseInt(nextShowTimeSeconds%60); var curhours = parseInt( curShowTimeSeconds / 3600); var curminutes = parseInt( (curShowTimeSeconds - hours * 3600)/60 ) var curseconds = parseInt(curShowTimeSeconds % 60); if(nextSeconds!=curseconds) { curShowTimeSeconds=nextShowTimeSeconds; } } function render( cxt ){ cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);//clearRect刷新函数 var hours = parseInt( curShowTimeSeconds / 3600); var minutes = parseInt( (curShowTimeSeconds - hours * 3600)/60 ) var seconds = parseInt(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)"; 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() } } } 浏览器显示这个 can not read type of undefine
时间问题吧,2019年3月31日应该是2019,2,31,因为月份是0-11
炫丽的倒计时效果Canvas绘图与动画基础
96755 学习 · 1000 问题
相似问题
回答 2
回答 1