请老师帮忙看下为什么我的代码会20秒才刷新一次-慕课网

首页课程实战体系课手记专栏慕课教程

请老师帮忙看下为什么我的代码会20秒才刷新一次

来源：5-2 屏幕自适应

蔬菜汤

2016-07-06 21:17

canvas_clock.html

<!DOCTYPE html>

<html>

<head>

<title>使用canvas实现各种效果</title>

</head>

<body>

</canvas>

</script>

</body>

</html>

-----------------------------------

canvas.js

var WINDOW_WIDTH=1000;

var WINDOW_HEIGHT = 800;

var RADIUS = 8;

var curTime = new Date();

var hour = curTime.getHours();

var minute = curTime.getMinutes();

var seconds = curTime.getSeconds();

window.onload = function(){

var canvas = document.getElementById("canvas");

var context = canvas.getContext('2d');

setInterval(

function(){

render(context);

},20);

render(context);

}

function render(cxt){

cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);

renderDight(cxt,parseInt(hour/10),0);

renderDight(cxt,parseInt(hour%10),15);

renderDight(cxt,10,30);

renderDight(cxt,parseInt(minute/10),39);

renderDight(cxt,parseInt(minute%10),54);

renderDight(cxt,10,69);

renderDight(cxt,parseInt(seconds/10),78);

renderDight(cxt,parseInt(seconds%10),93);

}

function renderDight(cxt,num,pos){

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(pos*(RADIUS+1)+j*2*(RADIUS+1)+(RADIUS+1),i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);

cxt.closePath();

cxt.fill();

}

// function update(){

// var nextTime = new Date();

// var nextHours = nextTime.getHours();

// var nextMinutes = nextTime.getMinutes();

// var nextSeconds = nextTime.getSeconds();

// if(parseInt(nextSeconds/10) != parseInt(seconds/10)){

// }

// if(parseInt(nextSeconds%10) != parseInt(seconds%10)){

// }

----------------------

digit.js

var digit =

[

[0,0,1,1,1,0,0],

[0,1,1,0,1,1,0],

[1,1,0,0,0,1,1],

[0,1,1,0,1,1,0],

[0,0,1,1,1,0,0]

],//0

[

[0,0,0,1,1,0,0],

[0,1,1,1,1,0,0],

[0,0,0,1,1,0,0],

[1,1,1,1,1,1,1]

],//1

[

[0,1,1,1,1,1,0],

[1,1,0,0,0,1,1],

[0,0,0,0,0,1,1],

[0,0,0,0,1,1,0],

[0,0,0,1,1,0,0],

[0,0,1,1,0,0,0],

[0,1,1,0,0,0,0],

[1,1,0,0,0,0,0],

[1,1,0,0,0,1,1],

[1,1,1,1,1,1,1]

],//2

[

[1,1,1,1,1,1,1],

[0,0,0,0,0,1,1],

[0,0,0,0,1,1,0],

[0,0,0,1,1,0,0],

[0,0,1,1,1,0,0],

[0,0,0,0,1,1,0],

[0,0,0,0,0,1,1],

[1,1,0,0,0,1,1],

[0,1,1,1,1,1,0]

],//3

[

[0,0,0,0,1,1,0],

[0,0,0,1,1,1,0],

[0,0,1,1,1,1,0],

[0,1,1,0,1,1,0],

[1,1,0,0,1,1,0],

[1,1,1,1,1,1,1],

[0,0,0,0,1,1,0],

[0,0,0,1,1,1,1]

],//4

[

[1,1,1,1,1,1,1],

[1,1,0,0,0,0,0],

[1,1,1,1,1,1,0],

[0,0,0,0,0,1,1],

[1,1,0,0,0,1,1],

[0,1,1,1,1,1,0]

],//5

[

[0,0,0,0,1,1,0],

[0,0,1,1,0,0,0],

[0,1,1,0,0,0,0],

[1,1,0,0,0,0,0],

[1,1,0,1,1,1,0],

[1,1,0,0,0,1,1],

[0,1,1,1,1,1,0]

],//6

[

[1,1,1,1,1,1,1],

[1,1,0,0,0,1,1],

[0,0,0,0,1,1,0],

[0,0,0,1,1,0,0],

[0,0,1,1,0,0,0],

[0,0,1,1,0,0,0]

],//7

[

[0,1,1,1,1,1,0],

[1,1,0,0,0,1,1],

[0,1,1,1,1,1,0],

[1,1,0,0,0,1,1],

[0,1,1,1,1,1,0]

],//8

[

[0,1,1,1,1,1,0],

[1,1,0,0,0,1,1],

[0,1,1,1,0,1,1],

[0,0,0,0,0,1,1],

[0,0,0,0,1,1,0],

[0,0,0,1,1,0,0],

[0,1,1,0,0,0,0]

],//9 10*7

[

[0,0,0,0],

[0,1,1,0],

[0,0,0,0],

[0,1,1,0],

[0,0,0,0],

[0,0,0,0]

]//: 10*4

];

写回答关注

2回答

大咪

2016-07-14 20:34:33

已采纳

setInterval(
function(){
curTime = new Date();
hour = curTime.getHours();
minute = curTime.getMinutes();
seconds = curTime.getSeconds();
render(context);
},
20 //这个数字，代表的就是多少ms刷新一次，改这里即可，可以试试看
);

1 0

蔬菜汤

非常感谢！

2016-07-15 17:10:39

共 1 条回复 >
蔬菜汤

2016-07-07 11:47:00

需要在定时方法中重新获取当前时间
setInterval(
function(){
curTime = new Date();
hour = curTime.getHours();
minute = curTime.getMinutes();
seconds = curTime.getSeconds();
render(context);
},20);

0 0

炫丽的倒计时效果Canvas绘图与动画基础

学习HTML5中最激动人心的技术Canvas，彻底释放自己的创造力

96746 学习 · 1000 问题

查看课程

相似问题

为什么时间是十秒刷新一次

回答 5

按老师的步骤来的，为什么我的要隔好几秒才自动刷新（下面是js代码）？

回答 1

按照老是步骤来为什么我的要一分钟才能更新一次,而且是分钟数和秒数一起更新

回答 2

为什么我的显示是00：00：00啊，帮忙看一下

回答 7

每隔一秒才变化一次，老师计时器那里为什么写50？？？不应该是1000毫秒么？

回答 1

打开慕课网App查看更多内容