學習了
對于一個文科生,數學還掛過科的人,尼瑪這種數學計算真心不會啊,那么復雜的東西表示不會了,不過我把那個最早的代碼call下來改成了一個電子時鐘的顯示大概就是這個樣子吧。

代碼只做了幾行修改,純屬娛樂吧
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()
????????????}
}
2016-01-13
贊一個