为啥写出来数字只有上半部分，没有下半部分？哪位大神帮帮忙
来源：3-2 倒计时数字钟的具体绘制
蒹葭苍沧
2021-01-26 10:10
<!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>
写回答
关注
2回答
-
- weixin_慕无忌2239137
- 2021-04-22 16:50:44
canvas.heihgt=WINDOW_HEIGHT; 前面的height写错了 改成canvas.height=WINDOW_HEIGHT;
-
- qq_星星变_0
- 2021-02-20 23:29:26
浏览器运行的时候把高度修改了（浏览器自作主张），强制指定一下canvas的高度就可以显示了
炫丽的倒计时效果Canvas绘图与动画基础
学习HTML5中最激动人心的技术Canvas，彻底释放自己的创造力
96746 学习 · 1000 问题
相似问题