                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /Html5
                        
                        /炫麗的倒計(jì)時(shí)效果Canvas繪圖與動(dòng)畫(huà)基礎(chǔ)

請(qǐng)老師幫忙看下為什么我的代碼會(huì)20秒才刷新一次

canvas_clock.html

<!DOCTYPE html>

<html>

<head>

<title>使用canvas實(shí)現(xiàn)各種效果</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

? ? ];

蔬菜湯

2016-07-06

源自：炫麗的倒計(jì)時(shí)效果Canvas繪圖與動(dòng)畫(huà)基礎(chǔ) 5-2

關(guān)注問(wèn)題我要回答

917

操作

收起

2 回答

大咪回答被采納 +3 積分
2016-07-14

setInterval(

function(){

curTime = new Date();

hour = curTime.getHours();

minute = curTime.getMinutes();

seconds = curTime.getSeconds();

render(context);

},

20 ? //這個(gè)數(shù)字，代表的就是多少ms刷新一次，改這里即可，可以試試看

);

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

蔬菜湯提問(wèn)者

非常感謝！

2016-07-15 回復(fù) 有任何疑惑可以回復(fù)我~

蔬菜湯提問(wèn)者
2016-07-07

需要在定時(shí)方法中重新獲取當(dāng)前時(shí)間

setInterval(

function(){

curTime = new Date();

hour = curTime.getHours();

minute = curTime.getMinutes();

seconds = curTime.getSeconds();

render(context);

},20);

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

舉報(bào)

0/150

提交

取消

炫麗的倒計(jì)時(shí)效果Canvas繪圖與動(dòng)畫(huà)基礎(chǔ)

參與學(xué)習(xí) 96869 人
解答問(wèn)題 1022 個(gè)

學(xué)習(xí)HTML5中最激動(dòng)人心的技術(shù)Canvas，徹底釋放自己的創(chuàng)造力

進(jìn)入課程

本課相似問(wèn)答

5 回答為什么時(shí)間是十秒刷新一次

1 回答按老師的步驟來(lái)的，為什么我的要隔好幾秒才自動(dòng)刷新（下面是js代碼）？

2 回答按照老是步驟來(lái)為什么我的要一分鐘才能更新一次,而且是分鐘數(shù)和秒數(shù)一起更新

7 回答為什么我的顯示是00：00：00啊，幫忙看一下

1 回答每隔一秒才變化一次，老師計(jì)時(shí)器那里為什么寫(xiě)50？？？不應(yīng)該是1000毫秒么？

搜索更多本課相關(guān)問(wèn)答

請(qǐng)老師幫忙看下為什么我的代碼會(huì)20秒才刷新一次

我要回答關(guān)注問(wèn)題

使用 Ctrl+D 可將網(wǎng)站添加到書(shū)簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

請(qǐng)老師幫忙看下為什么我的代碼會(huì)20秒才刷新一次

2 回答

本課相似問(wèn)答

請(qǐng)老師幫忙看下為什么我的代碼會(huì)20秒才刷新一次