基于Html5的Canvas實現的Clocks (鐘表)

Canvas是Html5中非常重要的Feature 之一，究竟Canvas的未來會怎么樣? 各大巨頭有著不同的想法，微軟的IE9會全面支持Canvas, Safari Chrome FireFox O...

Canvas是Html5中非常重要的Feature 之一，究竟Canvas的未來會怎么樣? 各大巨頭有著不同的想法，微軟的IE9會全面支持Canvas, Safari Chrome FireFox Opera 都已經支持了Canvas, 這些都是對Canvas利好的消息，這說明Canvas 將會在主流的瀏覽器上得到全面的支持。不過不全是對Canvas利好的消息，Adobe 微軟 都有自己成熟的替代技術，Adobe Flash 已經發展了這么多年，擁有廣大的用戶群，同時Flash的瀏覽器插件也幾乎成為了事實標準，同時Flash 擁有強大的圖形處理能力，和良好的IDE開發工具，這都會讓人不由的想選擇Flash來實現類似的圖形效果。微軟的SilverLight 不斷的更新和發展，這也說明了微軟想發展這項技術的決心。喬布斯不讓 IPhone 和IPad 支持Flash，但是Google最新的Android 2.2已經支持了Flash，看來這兩家巨頭在移動設備上的做法不太一樣，但是 Apple 和 Google 沒有類似的替代技術，看來他們會堅定不移的發展并支持Canvas技術，這兩家巨頭會帶著Canvas走向何處，Canvas會大方異彩被廣大的Web開發人員接收并采用，還是黯然的躲在角落里，我想一段時間后，這個答案會滿滿的浮出水面吧。
經典的Html5 Canvas 例子已經很多，這里的兩個Clock 創意并非來自于本文，ColorfulClock 來自于 http://demo.tutorialzine.com/2009/12/colorful-clock-jquery-css/demo.html , CharacterClock 來自于 http://www.j2nete.cn/time/time.html , 非常喜歡這兩個Clock創意，這里使用Canvas 來實現了它們，希望各位看官能夠喜歡。
實例執行頁面: http://www.zhangsichu.com/canvas/canvasclocks.htm ie7 ie8 沒有支持Canvas, 請在 Safari Chrome FireFox 或 Opera 下運行此實例頁面。
ColorfulClock

 

 

ColorfulClock 的核心代碼是 ColorfulRing的drawValue 方法，使用Canvas 的 path 創建路徑并填充路徑。

 

ColorfulRing.prototype.drawValue = function (value) {

var angleStart = 1.5 * Math.PI;
var angleEnd = value / this.threshold * 2 * Math.PI + 1.5 * Math.PI;
var clearSafe = 10;

this.context.save();
this.context.clearRect(this.positionX - this.radius - clearSafe, this.positionY - this.radius - clearSafe, (this.radius + clearSafe) *2, (this.radius + clearSafe) * 2);
this.context.beginPath();
this.context.arc(this.positionX, this.positionY, this.radius, angleStart, angleEnd, false);
this.context.lineTo(this.positionX + Math.cos(angleEnd) * this.radiusInner, this.positionY + Math.sin(angleEnd) * this.radiusInner);
this.context.arc(this.positionX, this.positionY, this.radiusInner, angleEnd, angleStart, true);
this.context.lineTo(this.positionX + Math.cos(angleStart) * this.radius, this.positionY + Math.sin(angleStart) * this.radius);
this.context.closePath();

this.context.strokeStyle = this.borderColor;
this.context.lineWidth = this.borderWidth;
this.context.stroke();

this.context.fillStyle = this.fillColor;
this.context.fill();

this.context.fillStyle = this.textColor;
this.context.font = this.textWeight + " " + this.textSize + " " + this.textFamily;
this.context.fillText(value < 10 ? "0" + value : value, this.positionX - parseInt(this.textSize) / 2 - parseInt(this.textSize) / 14, this.positionY + parseInt(this.textSize) / 3 + parseInt(this.textSize) / 14);
this.context.restore();

this.value = value;
}

 

CharacterClock Canvas 主要使用 fillText來繪制文字，核心的時間顯示算法，來自于OwenTime。

 

 

兩個Canvas Clock在Chrome下分別和DOM實現做了粗略性能比較:

 

 

 

 

 

似乎可以看出，Canvas 在這個用例上，有一點小小的優勢。