<!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>
2021-04-22
canvas.heihgt=WINDOW_HEIGHT;? ? ? 前面的height寫錯了 改成canvas.height=WINDOW_HEIGHT;?
2021-02-20
瀏覽器運行的時候把高度修改了（瀏覽器自作主張），強(qiáng)制指定一下canvas的高度就可以顯示了