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

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定

不知道為什么 效果只能顯示一部分，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%">
????當(dāng)前瀏覽器不支持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修飾的數(shù)據(jù)類型是指常類型，常類型的變量或?qū)ο蟮闹凳遣荒鼙桓碌??//endtime?截至?xí)r間
//?const?endTime=new?Date(2016,10,7,0,0,0);?//new?date()?不能超過距離現(xiàn)在的99小時?因?yàn)樾r設(shè)定只有兩位數(shù)?只能99小時?4天?月份0——11

//自動更新時間
var?endTime=new?Date();??//得到當(dāng)前的時間
endTime.setTime(endTime.getTime()+3600*1000);??//設(shè)置當(dāng)前時間（得到當(dāng)前時間（毫秒）+1h（3600）s*1000轉(zhuǎn)換為毫秒）
var?curShowTimeSeconds=0;?//當(dāng)前時間秒數(shù)為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;

????//屏幕自適應(yīng)
????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這個函數(shù)里面有個renderDigit()
????//依次繪制時分秒的每個數(shù)字，秒的個位數(shù)到區(qū)域左邊的距離是?93*(R+1)，
????//并且本身一個數(shù)的寬度是15*(R+1)，
????//所以得到了區(qū)域總寬為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()

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

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

function?getCurrentShowTimeSeconds()?{
????var?curTime=new?Date();?//取得當(dāng)前的時間
????var?retTime=endTime.getTime()-curTime.getTime();?//倒計時=結(jié)束時間-當(dāng)前時間???//getTime()??得到毫秒數(shù)
????retTime=Math.round(retTime/1000);??//round()?方法可把一個數(shù)字舍入為最接近的整數(shù)。//??ret/1000?把毫秒轉(zhuǎn)換為秒
????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;
????//當(dāng)前時間分解
????var?curHours=parseInt(curShowTimeSeconds/3600);
????var?curMinutes=parseInt((curShowTimeSeconds-curHours*3600)/60);
????var?curSeconds=curShowTimeSeconds%60;

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

????????????//小時
????????????if?(parseInt(curHours?/?10)?!=?parseInt(nextHours?/?10))?{
????????????????addBalls(margin_left,?margin_top,?parseInt(curHours?/?10));?//位置?X?Y?以及?相應(yīng)的數(shù)字
????????????}
????????????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;??//當(dāng)前的時間就是==下一個時間
????????}

????????updateBalls();??//更新所有的小球
????????console.log(balls.length);??//在控制臺打印balls的長度??//不停加長??//解決性能優(yōu)化
????}
???????
????????
function?updateBalls()?{
????//1.小球運(yùn)動值的變化?//.碰撞檢測
????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摩擦系數(shù)?越大越遠(yuǎn)
???????}
????}
????//2.性能優(yōu)化?刪除小球
????var?cnt=0;??//小球數(shù)量
????for?(var?i=0;i<balls.length;i++)
????????//右邊緣>0?和?左邊緣<canvas.width?說明在畫布內(nèi)?然后放在數(shù)組里
????????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()用于刪除并返回數(shù)組的最后一個元素

????}
}

function?addBalls(x,y,num)?{???//運(yùn)動的彩色小球
????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?之間?隨機(jī)數(shù)。
??????????????????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,??//向上拋一點(diǎn)點(diǎn)

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

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

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


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

????renderDigit(margin_left,margin_top,parseInt(hours/10),cxt)?;??//小時?//十位數(shù)??//?第一位?//起始位置?x?y
????renderDigit(margin_left+15*(radius+1),margin_top,parseInt(hours%10),cxt);?//小時//個位數(shù)//第二位//
????
????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();
????}
}

//具體的循環(huán)//規(guī)定何處填充顏色
function?renderDigit(x,y,num,cxt)?{??//傳入4個參數(shù)??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();
????}
}


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

http://img1.sycdn.imooc.com//581e9ff10001b47b13310746.jpg

正在回答

4 回答

把寬度也撐開100%就行了

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

把html的高度也撐開

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

試一下

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

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

</body>
</html>


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

給html也加一個高度試試

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

慕數(shù)據(jù)9493197 提問者

昨天加過了 還是不行
2016-11-07 回復(fù) 有任何疑惑可以回復(fù)我~

舉報

0/150
提交
取消

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

我要回答 關(guān)注問題
微信客服

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

 幫助反饋 APP下載

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

 公眾號

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