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

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

var WINDOW_WIDTH = 1024;
var WINDOW_HEIGHT = 768;
var RADIUS = 8;

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(10,10,parseInt( hours/10 ),context);
}

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

慕姐4007966

2017-09-24

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

關注問題我要回答

1362

操作

收起

3 回答

qq_無根草_0
2017-11-10

第一個錯誤：少了一個*

renderDigit(MARGIN_LEFT+15(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);

renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);

第二個錯誤：少了一個大括號

for(var j=0;j<digit[num][i].length;j++)

for(var j=0;j<digit[num][i].length;j++){

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

收起回答

慕仰9528121
2017-10-08

?哪里有錯嗎？為什么瀏覽器中什么都不顯示？
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()
?? ??? ?}
}