                        课程
                    
                        /前端开发
                        
                            /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

关注问题我要回答

1307

操作

收起

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