                        課程
                    
                        /前端開發(fā)
                        
                            /Html5
                        
                        /炫麗的倒計(jì)時效果Canvas繪圖與動畫基礎(chǔ)

為什么按著老師的代碼打的,運(yùn)行不報(bào)錯,只倒計(jì)時,其他的什么特效都沒顯示啊,找了好久原因沒找到

var WINDOW_WIDTH = 1024;

var WINDOW_HEIGHT = 768;

var RADIUS = 8;

var MARGIN_TOP = 60;

var MARGIN_LEFT = 30;

const endTime = new Date(2016,11,9,18,47,52);

var curShowTimeSeconds = 0

var balls=[];

const colors=['#33B5E5','#0099CC','#AA66CC','#9933CC','#99CC00','#669900','#FFBB33','#FF8800','#FF4444','#CC0000'];

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(){

? ? ? ? ? ? render( context );

? ? ? ? ? ? update();

? ? ? ? }

? ? ? ? ,

? ? ? ? 50

? ? );

}

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 = nextShowTimeSeconds % 60

? ? var curHours = parseInt( curShowTimeSeconds / 3600);

? ? var curMinutes = parseInt( (curShowTimeSeconds - curHours * 3600)/60 )

? ? var curSeconds = curShowTimeSeconds % 60

? ? if( nextSeconds != curSeconds ){

? ? ? ? if(parseInt(curHours/10) != parseInt(nextHours/10)){

? ? ? ? ? ? addBalls(MARGIN_LEFT+0,MARGIN_TOP,parseInt(curHours/10));

? ? ? ? }

? ? ? ? ?if(parseInt(curHours%10) != parseInt(nextHours%10)){

? ? ? ? ? ? addBalls(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(curHours/10));

? ? ? ? }

? ? ? ??

? ? ? ? if(parseInt(curMinutes/10) != parseInt(nextMinutes/10)){

? ? ? ? ? ? addBalls(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes/10));

? ? ? ? }

? ? ? ? if(parseInt(curMinutes%10) != parseInt(nextMinutes%10)){

? ? ? ? ? ? addBalls(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(curMinutes%10));

? ? ? ? }

? ? ? ??

? ? ? ? if(parseInt(curSeconds/10) != parseInt(nextSeconds/10)){

? ? ? ? ? ? addBalls(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(curSeconds/10));

? ? ? ? }

? ? ? ? if(parseInt(curSeconds%10) != parseInt(nextSeconds%10)){

? ? ? ? ? ? addBalls(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(nextSeconds%10));

? ? ? ? }

? ? ? ??

? ? ? ? curShowTimeSeconds = nextShowTimeSeconds;

? ? }

? ??

? ? updateBalls();

? ??

}

function updateBalls(){

? ?

? ? for(var i=0;i<balls.length;i++){

? ? ? ? balls[i].x += balls[i].vx;

? ? ? ? balls[i].y += balls[i].vy;

? ? ? ? balls[i].vy +=balls[i].g;

? ? ? ? if(balls[i].y>=WINDOW_HEIGHT-RADIUS){

? ? ? ? ? ? balls[i].y=WINDOW_HEIGHT-RADIUS;

? ? ? ? ? ? balls[i].vy=-balls[i].vy*0.75;

? ? ? ? }

? ? }

}

function addBalls(x,y,num){

? ??

? ? 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){

? ? ? ? ? ? ? ? var aBall={

? ? ? ? ? ? ? ? ? ? x:x+j*2*(RADIUS+1)+(RADIUS+1),

? ? ? ? ? ? ? ? ? ? y:y+i*2*(RADIUS+1)+(RADIUS+1),

? ? ? ? ? ? ? ? ? ? g:1.5+Math.random(),

? ? ? ? ? ? ? ? ? ? vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,

? ? ? ? ? ? ? ? ? ? vx:-5,

? ? ? ? ? ? ? ? ? ? color:colors[Math.floor(Math.random()*colors.length)]

? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? balls.push(aBall);

? ? ? ? ? ? ? ?

? ? ? ? ? ? }

? ? ? ? }

? ? }

}

function render( cxt ){

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

? ? var 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);

? ??

? ? for(var i=0;i<balls.length;i++){

? ? ? ? ?cxt.fillStyle=balls[i].color;

? ? ? ? cxt.beginPath();

? ? ? ? cxt.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true);

? ? ? ? cxt.closePath();

? ? ? ?

? ? ? ? cxt.fill();

? ? }

}

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()

? ? ? ? ? ? }

}

<!DOCTYPE html>

<html>

<head>

? ? <meta charset="UTF-8">

? ? <title></title>

</head>

? ? <canvas id="canvas" style="height:100%">

? ? ? ? 當(dāng)前瀏覽器不支持Canvas，請更換瀏覽器后再試

? ? </canvas>

? ??

</body>

</html>

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

? ? ? ? [

? ? ? ? ? ? [0,0,0,0],

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

? ? ? ? ? ? [0,0,0,0],

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

? ? ? ? ? ? [0,0,0,0],

? ? ? ? ? ? [0,0,0,0]

? ? ? ? ]//:

? ? ];

qq_沒做完的夢繼續(xù)睡_04234114

2016-11-07

源自：炫麗的倒計(jì)時效果Canvas繪圖與動畫基礎(chǔ) 4-3

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

1072

操作

收起

4 回答

遲夜
2018-08-02

我也是只有倒計(jì)時。。

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

收起回答

珍惜當(dāng)下慕課網(wǎng)
2017-04-17

什么問題，我也是只顯示倒計(jì)時，沒有小球效果

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

收起回答

浴火重生之低調(diào)
2017-04-16

同樣問題，求教

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

收起回答

qq_沒做完的夢繼續(xù)睡_04234114 提問者
2016-11-07

已解決

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

收起回答

#1

qq_魚_45

是哪里出了問題，我的也是只有倒計(jì)時，沒有小球的效果

2018-06-13 回復(fù) 有任何疑惑可以回復(fù)我~

舉報(bào)

0/150

提交

取消

炫麗的倒計(jì)時效果Canvas繪圖與動畫基礎(chǔ)

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

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

進(jìn)入課程

本課相似問答

3 回答找了好久都找不到錯誤啊....

3 回答怎么什么都顯示不出來??？看了好幾遍，都沒找出錯誤在哪？

4 回答倒計(jì)時正常，瀏覽器沒報(bào)錯，小球效果出不來，為什么呀

2 回答倒計(jì)時沒有動啊

3 回答為什么我到他顯示出1的時候我的顯示不出來

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

為什么按著老師的代碼打的,運(yùn)行不報(bào)錯,只倒計(jì)時,其他的什么特效都沒顯示啊,找了好久原因沒找到

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

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

微信客服

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

幫助反饋 APP下載

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

公眾號

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

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

熱搜

最近搜索清空

為什么按著老師的代碼打的,運(yùn)行不報(bào)錯,只倒計(jì)時,其他的什么特效都沒顯示啊,找了好久原因沒找到

4 回答

本課相似問答

為什么按著老師的代碼打的,運(yùn)行不報(bào)錯,只倒計(jì)時,其他的什么特效都沒顯示啊,找了好久原因沒找到