對于一個(gè)文科生，數(shù)學(xué)還掛過科的人，尼瑪這種數(shù)學(xué)計(jì)算真心不會(huì)啊，那么復(fù)雜的東西表示不會(huì)了，不過我把那個(gè)最早的代碼call下來改成了一個(gè)電子時(shí)鐘的顯示大概就是這個(gè)樣子吧。

代碼只做了幾行修改，純屬娛樂吧

var?WINDOW_WIDTH?=?1024;
var?WINDOW_HEIGHT?=?768;
var?RADIUS?=?8;
var?MARGIN_TOP?=?60;
var?MARGIN_LEFT?=?30;
var?canvas?=?document.getElementById('canvas');
var?context?=?canvas.getContext("2d");
var?colors?=?['#FF83FA','#EEEE00','#f58220','#7bbfea','#fcf16e','#6f60aa','#bed742','#d71345','#006c54','#afdfe4','#ef5b9c','#d93a49','#76becc','#cbc547','#426ab3','#11264f','#563624','#f15a22','#deab8a','#401c44']

window.onload?=?function(){

????canvas.width?=?WINDOW_WIDTH;
????canvas.height?=?WINDOW_HEIGHT;
	
	render(context);
	
	setInterval(function(){
		context.clearRect(0,?0,?canvas.width,?canvas.height);
		render(context);
	},1000);
}

function?render(?cxt?){
	
	var?date?=?new?Date();
	var?hours?=?date.getHours();
	var?minutes?=?date.getMinutes();
	var?seconds?=?date.getSeconds();
	
	if(?hours<10?)???hours?=?"0"+hours;
	if(?minutes<10?)?minutes?=?"0"+minutes;
	if(?seconds<10?)?seconds?=?"0"+seconds;

????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?){

????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?){
					var?TheColor?=?colors[Math.floor(Math.random()*colors.length)];
					cxt.fillStyle?=?TheColor;
					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()
????????????}
}