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

為什么只顯示出一個12呢？？？

countdown.js

var WINDOW_WIDTH = 1024;

var WINDOW_HEIGHT = 768;

var RADIUS = 8;

var MARGIN_TOP = 60;

var MARGIN_LEFT = 30;

window.onload = function(){

? ? var canvas = document.getElementById('canvas');

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

? ? canvas.width = WINDOW_WIDTH;

? ? canvas.height = WINDOW_HEIGHT;

? ? render( context );

};

function render( cxt ){

? ? var hours = 12;

? ? var minutes = 34;

? ? var seconds = 56;

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

}

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

? ? ? ? ? ? }

}

慕哥8045220

2017-09-29

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

關注問題我要回答

1542

操作

收起

3 回答

小昊子
2017-10-08

要這么改：

const?endTime?=?new?Date(2017,9,3,0,0);
var?curShowTimeSeconds?=?0;//存儲自1970年0時0分0秒到現在的毫米數，初始化為0；
var?windowWidth?=?1500;
var?windowHieght?=?800;
var?R?=?8;
var?marginTop?=?60;
var?marginLeft?=?30;


var?balls?=?new?Array(0);
const?colors?=?["#33E5B5","#09C","#A6C","#93C","#9C0","#690","#FB3","#F80","#CC000C"];


//?var?c?=?document.getElementById("clock");
//?var?context?=?c.getContext('2d');
window.onload?=?function?()?{
????var?canvas?=?document.getElementById("clock");
????var?ctx?=?canvas.getContext('2d');
????canvas.width?=?windowWidth;
????canvas.height?=?windowHieght;
????curShowTimeSeconds?=?getCurrentShowTimeSeconds();
????setInterval(function?()?{
????????render(ctx);
????????upDate();
????},50);
};

function?upDate()?{
????var?nextShowTimeSeconds?=?getCurrentShowTimeSeconds();
????//var?curShowTimeSeconds?=?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(marginLeft,marginTop,parseInt(curhours/10));
????????}
????????if?(parseInt(curhours%10)?!=?parseInt(nexthours%10)){
????????????addBalls(marginLeft+15*(R+1),marginTop,curhours%10);
????????}//hours

????????if?(parseInt(curminutes/10)?!=?parseInt(nextminutes/10)){
????????????addBalls(marginLeft?+39*(R+1),marginTop,parseInt(curminutes/10));
????????}
????????if?(parseInt(curminutes%10)?!=?parseInt(nextminutes%10)){
????????????addBalls(marginLeft+54*(R+1),marginTop,curminutes%10);
????????}//minutes

????????if?(parseInt(curseconds/10)?!=?parseInt(nextseconds/10)){
????????????addBalls(marginLeft+78*(R+1),marginTop,parseInt(curseconds/10));
????????}
????????if?(parseInt(curseconds%10)?!=?parseInt(nextseconds%10)){
????????????addBalls(marginLeft+93*(R+1),marginTop,curseconds%10);
????????}//seconds



????????curShowTimeSeconds?=?nextShowTimeSeconds;
????}
????updateBalls();
}

function?render(cxt)?{
????cxt.beginPath;
????cxt.clearRect(0,0,windowWidth,windowHieght);
????cxt.font?=?"40px?宋體";
????cxt.fillText("距離10.3?0：00還有：",30,40);

????var?hours?=?parseInt(curShowTimeSeconds?/?3600);//總秒數除以3600秒，強制類型轉換
????var?minutes?=?parseInt((curShowTimeSeconds?-?hours?*3600)/60);//總時間減去小時的秒數，除以60秒，強制類型轉換
????var?seconds?=?curShowTimeSeconds?%?60;//總時間除以60為分鐘數，其的余數為秒數

????//console.log("ds");
????renderDigit(marginLeft,marginTop,parseInt(hours/10),cxt);
????renderDigit(15*(R+1)+marginLeft,marginTop,parseInt(hours%10),cxt);
????renderDigit(30*(R+1)+marginLeft,marginTop,10,cxt);
????//hours
????renderDigit(39*(R+1)+marginLeft,marginTop,parseInt(minutes/10),cxt);
????renderDigit(54*(R+1)+marginLeft,marginTop,parseInt(minutes%10),cxt);
????renderDigit(69*(R+1)+marginLeft,marginTop,10,cxt);
????//minutes
????renderDigit(78*(R+1)+marginLeft,marginTop,parseInt(seconds/10),cxt);
????renderDigit(93*(R+1)+marginLeft,marginTop,parseInt(seconds%10),cxt);
????//seconds


????for?(var?i?=0;i<balls.length;i++){
????????cxt.fillStyle?=?balls[i].color;

????????cxt.beginPath();
????????cxt.arc(balls[i].x,balls[i].y,R,0,2*Math.PI,false);
????????cxt.closePath();
????????cxt.fill();
????}
}

function?renderDigit(x,y,num,ctx)?{
????ctx.fillStyle?=?"rgb(0,102,153)";
????//console.log(digit[num].length);
????for?(var?i?=?0;i<digit[num].length;i++){//遍歷所有數字的點陣
????????//console.log(digit[num][i]);
????????for?(var?j?=?0;j<digit[num][i].length;j++){//遍歷所有點陣中的點
????????????if?(digit[num][i][j]?===?1){
????????????????ctx.beginPath();
????????????????ctx.arc(x+j*2*(R+1)+(R+1),y+i*2*(R+1)+(R+1),R,0,Math.PI*2,true);
????????????????//?圓的margin為2，每個圓在一個格子中，圓的半徑為R
????????????????//?格子邊長為2*(R+1);i為y坐標，j為x坐標；第(i,j)個圓的圓心位置：(x+j*2*(R+1)+(R+1),y+i*2*(R+1)+(R+1))
????????????????ctx.closePath();
????????????????ctx.fill();
????????????}
????????}
????}
}
function?getCurrentShowTimeSeconds()?{
????var?curTime?=?new?Date();
????var?ret?=?endTime.getTime()?-?curTime.getTime();
????ret?=?Math.round(ret/1000);
????return?ret?>=0???ret:0;
}
function?addBalls(x,y,num)?{
????//console.log(num);
????for?(var?i?=?0;i<digit[num].length;i++){//遍歷所有數字的點陣
????????//console.log(digit[num][i].length);
????????for?(var?j?=?0;j<digit[num][i].length;j++){//遍歷所有點陣中的點
????????????if?(digit[num][i][j]?===?1){
????????????????//var?airResistance?=?0.7;
????????????????var?aBall?=?{
????????????????????x:x+j*2*(R+1)+(R+1),
????????????????????y:y+i*2*(R+1)+(R+1),
????????????????????a:2?+?Math.random()*10,
????????????????????vx:Math.pow(-1,Math.ceil(Math.random()*1000))*30,
????????????????????vy:-Math.floor(Math.random()*30),
????????????????????color:colors[Math.floor(Math.random()*colors.length)]
????????????????};
????????????????balls.push(aBall);
????????????}
????????}
????}
}

function?updateBalls()?{
????for?(var?i?=0?;i<balls.length;i++){
????????balls[i].x+=balls[i].vx;
????????balls[i].y+=balls[i].vy;
????????balls[i].y+=balls[i].a;

????????if?(balls[i].y?>=?windowHieght?-?R)?{
????????????balls[i].y?=?windowHieght?-?R;
????????????balls[i].vy?=?-balls[i].vy*0.8;
????????}
????????if?(balls[i].y?<=?R){
????????????balls[i].y?=?R;
????????????balls[i].vy?=?-balls[i].vy*0.8;
????????}
????????//?if?(balls[i].x?>=?windowWidth?-?R){
????????//?????balls[i].x?=?windowWidth?-?R;
????????//?????balls[i].vx?=?-balls[i].vx*0.8;
????????//?}
????????//?if?(balls[i].x?<=?R){
????????//?????balls[i].x?=?R;
????????//?????balls[i].vx?=?-balls[i].vx*0.8;
????????//?}
????}
}