【飞秋】基于Html5的Canvas实现的Clocks (钟表)

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

03 var angleStart = 1.5 * Math.PI;

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

05 var clearSafe = 10;

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();

16 this.context.strokeStyle = this.borderColor;

17 this.context.lineWidth = this.borderWidth;

18 this.context.stroke();

20 this.context.fillStyle = this.fillColor;

21 this.context.fill();

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();

28 this.value = value;

29 }

CharacterClock Canvas 主要使用 fillText来绘制文字，核心的时间显示算法，来自于OwenTime。

两个Canvas Clock在Chrome下分别和DOM实现做了粗略性能比较:

关注技术文章飞秋：http://www.freeeim.com/，24小时专业转载。

【飞秋】基于Html5的Canvas实现的Clocks (钟表)相关推荐

html实现颜料效果,JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
本文实例讲述了JS基于HTML5的canvas标签实现色相球效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: JS canvas标签制作色相球 var canvas,ctx, ...
基于Html5 的canvas容器实现定制印章（圆形、椭圆、方形）
出于业务需求,最近需要开发个基于web页面的印章制作功能.经过各大论坛.网站.github的一番学习后,我发现圆形.椭圆的例子有很多,但是方形印章的源码却很少,甚至我都没找到. 于是只能自己造轮子了, ...
基于HTML5 Canvase的在线画图及图片处理工具
简介这是基于HTML5的Canvas而实现的在线画图及简单图片处理的工具,是我的计算机图形学期末课程设计作业.主要功能包括:画图.颜色反转.转灰度图.阴影效果.横向渐变.纵向渐变等.处理好的图片还能 ...
HTML5 飞秋官方下载 fps 也为咱国人争点脸
真想猛学c++二十年,然后去开发一个自己喜欢玩的HTML5 飞秋官方下载 fps.也为咱国人争点脸.可惜悲剧摆在这呢.明天还得补考呢.看也看不会.心思全无.只能坐以待挂了.在结束之前再喷一次穿越火线次 ...
html5 can,基于html5 can-vas实现漫天飞雪效果实例
本文实例讲述了基于html5 canvas实现漫天飞雪效果的方法,运行该实例可以看到很棒的下雪效果.如下图所示: 主要代码如下:代码如下:ttp://www.w3.org/TR/xhtml1/DTD/ ...
html5画图论文结束语,基于HTML5 Canvas的画图板的设计与实现.doc
单片机论文_优秀毕业论文_毕业论文设计_毕业过关论文_毕业设计_毕业设计说明_毕业论文_单片机毕业论文_基于单片机毕业论文_毕业论文终稿_毕业论文初稿_毕业论文设计_单片机论文_本文档支持完整下载,支 ...
基于html5 Canvas图表库 : ECharts
基于html5 Canvas图表库 : ECharts 分类编程技术 ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生 ...
echart图片库_基于html5 Canvas图表库 : ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
php项目网页音乐播放器插件,基于HTML5 canvas和Web Audio的音频播放器插件
wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件.通过wavesurfer.js你可以使用它来制作各种HTML5音频播放器,它可以在各种支持 Web A ...

【飞秋】基于Html5的Canvas实现的Clocks (钟表)

【飞秋】基于Html5的Canvas实现的Clocks (钟表)相关推荐

最新文章

热门文章