问答详情
源自：3-2 倒计时数字钟的具体绘制

为啥写出来数字只有上半部分，没有下半部分？哪位大神帮帮忙

<!DOCTYPE html><html lang='zh-cn'>    <head>        <title></title>        <meta charset="utf-8">    </head>    <body>        <canvas id="canvas" style="display: block;margin: 50px auto;"></canvas>        <script src="digit.js"></script>        <script type="text/javascript">            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.heihgt=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();                        }                       }                }            }        </script>    </body></html>

http://img4.mukewang.com/600f7a1f0001e49a15750512.jpg

提问者：蒹葭苍沧 2021-01-26 10:10

个回答

  • weixin_慕无忌2239137
    2021-04-22 16:50:44

    canvas.heihgt=WINDOW_HEIGHT;      前面的height写错了 改成canvas.height=WINDOW_HEIGHT; 

    0
  • qq_星星变_0
    2021-02-20 23:29:26

    浏览器运行的时候把高度修改了（浏览器自作主张），强制指定一下canvas的高度就可以显示了

    0