<!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>