亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

<th id="w8ji8"></th>

                        課程
                    
                        /前端開發
                        
                            /Html5
                        
                        /炫麗的倒計時效果Canvas繪圖與動畫基礎

不知道為什么效果只能顯示一部分，height的高度也撐開了的啊

這是HTML代碼

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>canvas倒計時效果</title>
</head>
<body?style="height:?100%">
<canvas?id="canvas"?style="height:?100%">
????當前瀏覽器不支持Canvas，請更換瀏覽器后再試
</canvas>

<script?src="digit.js"></script>
<!--<script?src="canvas03.js"></script>-->

<script?src="canvas%20daojishi.js"></script>
<!--<script?src="canvas01.js"></script>-->

<!--<script?src="countdown.js"></script>-->



</body>
</html>

這是js代碼

var?canvas_width=1024;
var?canvas_height=768;
var?radius=8;
var?margin_top=60;
var?margin_left=30;

//const修飾的數據類型是指常類型，常類型的變量或對象的值是不能被更新的??//endtime?截至時間
//?const?endTime=new?Date(2016,10,7,0,0,0);?//new?date()?不能超過距離現在的99小時?因為小時設定只有兩位數?只能99小時?4天?月份0——11

//自動更新時間
var?endTime=new?Date();??//得到當前的時間
endTime.setTime(endTime.getTime()+3600*1000);??//設置當前時間（得到當前時間（毫秒）+1h（3600）s*1000轉換為毫秒）
var?curShowTimeSeconds=0;?//當前時間秒數為0

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

window.onload=function?()?{
????var?canvas=document.getElementById("canvas");
????//?canvas.width=canvas_width;
????//?canvas.height=canvas_height;

????//屏幕自適應
????canvas_width=document.body.clientWidth;
????canvas_height=document.body.clientHeight;

????margin_left=Math.round(canvas_width/10);
????margin_top=Math.round(canvas_height/5);

????radius=Math.round((canvas_width*4/5)/108)-1;
????//render這個函數里面有個renderDigit()
????//依次繪制時分秒的每個數字，秒的個位數到區域左邊的距離是?93*(R+1)，
????//并且本身一個數的寬度是15*(R+1)，
????//所以得到了區域總寬為93*(R+1)+15*(R+1)=108*(R+1)，
????//也就是window_width*4/5?=?108?*(R+1)；

????var?context=canvas.getContext("2d");
????
????curShowTimeSeconds=getCurrentShowTimeSeconds();

????//?render(context);??//渲染?具體繪制??//替換為setInterval()

????//動畫效果的實現
????setInterval(
????????function?()?{
????????????render(context);??//在畫布上描述?//下面已完成
????????????update();??//數據的變化

????????},50
????)
};

function?getCurrentShowTimeSeconds()?{
????var?curTime=new?Date();?//取得當前的時間
????var?retTime=endTime.getTime()-curTime.getTime();?//倒計時=結束時間-當前時間???//getTime()??得到毫秒數
????retTime=Math.round(retTime/1000);??//round()?方法可把一個數字舍入為最接近的整數。//??ret/1000?把毫秒轉換為秒
????return?retTime>=0??retTime:0;??//判斷reTime是否>=0?如果是?則返回?ret?否則返回0
}

function?update()?{

????//1.時間變化
????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;

????//2.添加小球位置的變化
?????if?(nextSeconds?!=?curSeconds)?{?//判斷下一個時間是否等于當前的時間//當不等于的時候

????????????//小時
????????????if?(parseInt(curHours?/?10)?!=?parseInt(nextHours?/?10))?{
????????????????addBalls(margin_left,?margin_top,?parseInt(curHours?/?10));?//位置?X?Y?以及?相應的數字
????????????}
????????????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(curSeconds?%?10));
????????????}


????????????curShowTimeSeconds?=?nextShowTimeSeconds;??//當前的時間就是==下一個時間
????????}

????????updateBalls();??//更新所有的小球
????????console.log(balls.length);??//在控制臺打印balls的長度??//不停加長??//解決性能優化
????}
???????
????????
function?updateBalls()?{
????//1.小球運動值的變化?//.碰撞檢測
????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>=canvas_height-radius)?{
???????????balls[i].y?=?canvas_height?-?radius;
???????????balls[i].vy?=?-balls[i].vy?*?0.75;??//0.75摩擦系數?越大越遠
???????}
????}
????//2.性能優化?刪除小球
????var?cnt=0;??//小球數量
????for?(var?i=0;i<balls.length;i++)
????????//右邊緣>0?和?左邊緣<canvas.width?說明在畫布內?然后放在數組里
????????if(balls[i].x+radius>0?&&?balls[i].x-radius<canvas_width)
????????????balls[cnt++]?=?balls[i];

????while?(balls.length>Math.min(200,cnt)){??//保留200到cnt之間的最小值
????????balls.pop();??//pop()用于刪除并返回數組的最后一個元素

????}
}

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(),??//加速度?1.5-2.5?//?不同

??????????????????//?在X軸上的加速度?//Math.round()?四舍五入取整??//random()?0?~?1?之間?隨機數。
??????????????????vx:?Math.pow(-1,?Math.ceil(Math.random()?*?1000))?*?4,??//1-1000//取整?//取-1?或+1?//*4//-4至+4
??????????????????//?Math.ceil向上取整??//pow()?方法可返回?x?的?y?次冪的值。在這里是?-1的N次冪

??????????????????vy:?-5,??//向上拋一點點

??????????????????//math.floor(x)對浮點數向下取整??//
??????????????????color:?colors[Math.floor(Math.random()?*?colors.length)]?//顏色數組
??????????????};
??????????????balls.push(aBall);
??????????}
}

function?render(cxt)?{???//在畫布上描述

????cxt.clearRect(0,0,canvas_width,canvas_height);??//clearRect()?方法清空給定矩形內的指定像素??//畫布更新??//時間變化不重復


????//當前的時間
????var?hours=parseInt(curShowTimeSeconds/3600);
????var?minutes=parseInt((curShowTimeSeconds-hours*3600)/60);??//（現在秒-當前秒?）/60??=分鐘
????var?seconds=curShowTimeSeconds%60;??//倒計時具體時間??//%60取余

????renderDigit(margin_left,margin_top,parseInt(hours/10),cxt)?;??//小時?//十位數??//?第一位?//起始位置?x?y
????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)?{??//傳入4個參數??X?Y?num?cxt
????cxt.fillStyle="#00ff00";??//定義好顏色
????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,0,2*Math.PI);
????????cxt.closePath();
????????cxt.fill();
????}
}

可是顯示出來是這樣的為什么呢?

慕數據9493197

2016-11-06

源自：炫麗的倒計時效果Canvas繪圖與動畫基礎 5-3

關注問題我要回答

865

操作

收起

4 回答

qq_ForTheDream_33686428
2017-04-15

把寬度也撐開100%就行了

0 回復有任何疑惑可以回復我~

慕粉1006301048
2017-04-12

把html的高度也撐開

0 回復有任何疑惑可以回復我~

Jathy
2017-01-16

試一下

<!DOCTYPE?html>
<html?style="height:?100%;">
<head>
<meta?charset="utf-8">
<title></title>
</head>
<body?style="height:?100%;">
<canvas?id="canvas"?style=""height:?100%;?">
當前瀏覽器不支持Canvas,請更換瀏覽器后再嘗試
</canvas>

<script?src="digit.js">?</script>
<script?src="countdown.js">?</script>

</body>
</html>

0 回復有任何疑惑可以回復我~

慕碼人0782422
2016-11-07

給html也加一個高度試試

0 回復有任何疑惑可以回復我~

#1

慕數據9493197 提問者

昨天加過了還是不行

2016-11-07 回復有任何疑惑可以回復我~

舉報

0/150

提交

取消

炫麗的倒計時效果Canvas繪圖與動畫基礎

參與學習 96904 人
解答問題 1029 個

學習HTML5中最激動人心的技術Canvas，徹底釋放自己的創造力

本課相似問答

8 回答為什么實際顯示的數字只有上半部分？

6 回答為什么我的高用了document.body.clientHeight高度變成了160。。html中有寫兩個height為100%

2 回答不知道為什么一直顯示不出來，還報錯？

1 回答為什么加了小球效果后不顯示了QAQ?

1 回答出不來效果注釋部分為小球特效加了以后倒計時效果也出不來了

搜索更多本課相關問答

不知道為什么效果只能顯示一部分，height的高度也撐開了的啊

我要回答關注問題

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

掃描二維碼
關注慕課網微信公眾號

<td id="vyfm3"></td>