专栏首页葡萄城控件技术团队基于Html5的Canvas实现的Clocks (钟表)

基于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 创建路径并填充路径。

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 在这个用例上,有一点小小的优势。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • VS2010 Extension实践(1)

    最近VS2010 Extension在Visual Studio Blog(http://blogs.msdn.com/visualstudio/)上提得很频繁...

    葡萄城控件
  • WPF下可编辑Header的Tab控件实现

    介绍 有这样一个需求,当用户双击Tab控件Header区域时, 希望可以直接编辑。对于WPF控件,提供一个ControlTemplate在加上一些Trigger...

    葡萄城控件
  • ASP.NET AJAX UpdatePanel 控件实现剖析

    使用ASP.NET AJAX框架我们可以搭建快速响应、具有丰富的用户体验的AJAX Web应用程序,而该框架的UpdatePanel控件则提供了一种非常简单的方...

    葡萄城控件
  • three.js 郭先生制作太阳系

    今天郭先生收到评论,想要之前制作太阳系的案例,因为找不到了,于是在vue版本又制作一版太阳系,在线案例请点击three.js制作太阳系(加载时间比较长,请稍等一...

    郭先生的博客
  • python3爬虫-知乎登陆

    参考的是这位博主的博客:https://home.cnblogs.com/u/zkqiang

    py3study
  • .glb格式的模型怎么在three.js中展示

    3D软件中导出的格式一般有.obj 和.glb ,下面是blender 2.8.2 生成模型并在three.js中展示的流程

    tianyawhl
  • 云终端系列(一)—— 实时音视频Web端接入体验(Vue基础音视频通话篇)

    这个系列呢,主要给各位观众老爷看看目前有较大趋势的SaaS应用的SDK在各种主流Web终端的使用姿势和异常分析,如果想要纯粹了解开发的或者云原生,云开发的可以去...

    楚歌
  • 闪屏还可以这样玩

    对于多数应用来说,在进入APP的时候使用短暂的闪屏广告来吸引用户是很常见的一个场景。但随着这种模式的频繁应用,越来越多的用户会感到审美疲劳,甚至不看就跳过闪屏了...

    林焕彬
  • threejs 场景切换 优化性能

    是实现2个场景的定时切换,由于是用在大屏系统,需要浏览器一直能正常运行,不能运行一段时间卡死

    tianyawhl
  • JavaScript this关键字

    Mirror王宇阳

扫码关注云+社区

领取腾讯云代金券