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 創建路徑并填充路徑。

?

view sourceprint?01 ColorfulRing.prototype.drawValue = function (value) {?

02???

03 var angleStart = 1.5 * Math.PI;?

04 var angleEnd = value / this.threshold * 2 * Math.PI + 1.5 * Math.PI;?

05 var clearSafe = 10;?

06???

07 this.context.save();?

08 this.context.clearRect(this.positionX - this.radius - clearSafe, this.positionY - this.radius - clearSafe, (this.radius + clearSafe) *2, (this.radius + clearSafe) * 2);?

09 this.context.beginPath();?

10 this.context.arc(this.positionX, this.positionY, this.radius, angleStart, angleEnd, false);?

11 this.context.lineTo(this.positionX + Math.cos(angleEnd) * this.radiusInner, this.positionY + Math.sin(angleEnd) * this.radiusInner);?

12 this.context.arc(this.positionX, this.positionY, this.radiusInner, angleEnd, angleStart, true);?

13 this.context.lineTo(this.positionX + Math.cos(angleStart) * this.radius, this.positionY + Math.sin(angleStart) * this.radius);?

14 this.context.closePath();?

15???

16 this.context.strokeStyle = this.borderColor;?

17 this.context.lineWidth = this.borderWidth;?

18 this.context.stroke();?

19???

20 this.context.fillStyle = this.fillColor;?

21 this.context.fill();?

22???

23 this.context.fillStyle = this.textColor;?

24 this.context.font = this.textWeight + " " + this.textSize + " " + this.textFamily;?

25 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);?

26 this.context.restore();?

27???

28 this.value = value;?

29 }

?

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

?

?

?

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

?

關注技術文章飛秋：http://www.freeeim.com/，24小時專業轉載。

總結

以上是生活随笔為你收集整理的【飞秋】基于Html5的Canvas实现的Clocks (钟表)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。