canvas 让 iPhone 时钟走起来！

昨天用 canvas 画了一个太极图，但是显然没有让我过瘾，今天又心血来潮用 canvas 画了一个 iPhone 的时钟，也不能完全算是心血来潮，昨天有朋友在微博上 @我一个视频，一个牛人用 css3 画出一个 iPhone 来！我当然不至于凶残地画一个 iPhone 出来，我就画一个 iPhone 的时钟就好了，不过不是用 css3，而是用 canvas。

大家都知道 iPhone 的时钟 ICON 只是一个图标，是不会走的，既然要用 canvas 画它出来，当然要让它动起来啦，哈哈。然后我就看一眼 iPhone，写一行代码，这样照着时钟图标画出一个来，点我！点我！点我！看会走的 iPhone 时钟！喔哟，不错哦~

可以看到，这时钟上的每一条线、每一个圆角、每一个阴影、每一个数字、每一个像素都是用 javascript 写出来的，所以它的特点就是不限于尺寸，放大缩小都不会影响时钟的显示，就好像是一张矢量图一样，另外也免去了对图片和样式的请求，这些都由 javascript 代劳了。不过很可惜的是，canvas 是 HTML5 规范的产物，ie6/7/8 依旧不支持，虽然有 excanvas 这样优秀的项目可以让 ie6/7/8 变相支持 canvas，但是强扭的瓜不甜，通过 excanvas 支持的 canvas 效果总是略逊一筹。

哪天有时间或许我还可以用 canvas 把 iPhone 的*几个图标画出来，到时候组合起来搞个 canvas 版的 iPhone，这个想法也够凶残的了，就此打住，收笔。

本文转自：Life Studio 非本站原创 如果侵犯了您的权力 请Email：13612963@qq.com 告知

相关文章