前言

  参照Mozilla 官方教程,要在Canvas上画动画时钟,思路非常有意思。

  把动画看作是多个帧组成,定时每个时间点在Canvas上画一帧来实现动画。而Mozilla 官方教程画图实现的思路有意思的地方在于,它喜欢在画布上面做文章,正常的思路,如果要画一条倾斜45度的直线,一般会先用数据计算拿到起始点与末点的坐标,先定位到起点画线到末点;如何在画布上面做文章呢,它先把画布旋转45度,然后直接在中间画一条竖线,再把画布复原,这样直线也跟着倾斜45度了。就按这思路定时在Canvas上画点、线、面实现时钟动画。

页面效果如下

原代码如下

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>canvas时钟 - Coffeescript实现</title>
  6. <script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>
  7. <script id="others_coffeescript" type="text/javascript" class="library" src="/js/sandbox/other/coffee-script.js"></script>
  8. </head>
  9. <body>
  10. <canvas id="canvas"></canvas>
  11. <h2>
  12. Coffeescript 练习
  13. </h2>
  14. <p>
  15. Canvas时钟 - Coffeescript实现
  16. </p>
  17. <p>
  18. 参照 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">An animated clock</a>
  19. </p>
  20. </body>
  21. <script type="text/coffeescript">
  22. clock = ->
  23. now = new Date()
  24. ctx = document.getElementById('canvas').getContext '2d'
  25. ctx.save()
  26. ctx.clearRect 0,0,150,150
  27. ctx.translate 75,75
  28. ctx.scale 0.4,0.4
  29. ctx.rotate -Math.PI/2
  30. ctx.strokeStyle = "black"
  31. ctx.fillStyle = "white"
  32. ctx.lineWidth = 8
  33. ctx.lineCap = "round"
  34.  
  35. #画12个小时的标刻
  36. ctx.save()
  37. for i in [0..11]
  38. ctx.beginPath()
  39. ctx.rotate Math.PI/6
  40. ctx.moveTo 100,0
  41. ctx.lineTo 120,0
  42. ctx.stroke()
  43. ctx.restore()
  44.  
  45. #画60个分钟的标刻
  46. ctx.save()
  47. ctx.lineWidth = 5
  48. for i in [0..59]
  49. if i%5 isnt 0
  50. ctx.beginPath()
  51. ctx.moveTo 117,0
  52. ctx.lineTo 120,0
  53. ctx.stroke()
  54. ctx.rotate Math.PI/30
  55. ctx.restore()
  56.  
  57. sec = now.getSeconds()
  58. min = now.getMinutes()
  59. hr = now.getHours()
  60. hr = if hr >= 12 then hr-12 else hr
  61.  
  62. ctx.fillStyle = "black"
  63.  
  64. #画时针
  65. ctx.save()
  66. ctx.rotate hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec
  67. ctx.lineWidth = 14
  68. ctx.beginPath()
  69. ctx.moveTo -20,0
  70. ctx.lineTo 80,0
  71. ctx.stroke()
  72. ctx.restore()
  73.  
  74. #画分针
  75. ctx.save()
  76. ctx.rotate (Math.PI/30)*min + (Math.PI/1800)*sec
  77. ctx.lineWidth = 10
  78. ctx.beginPath()
  79. ctx.moveTo -28,0
  80. ctx.lineTo 112,0
  81. ctx.stroke()
  82. ctx.restore()
  83.  
  84. #画秒针
  85. ctx.save()
  86. ctx.rotate sec * Math.PI/30
  87. ctx.strokeStyle = "#D40000"
  88. ctx.fillStyle = "#D40000"
  89. ctx.lineWidth = 6
  90. ctx.beginPath()
  91. ctx.moveTo -30,0
  92. ctx.lineTo 83,0
  93. ctx.stroke()
  94. ctx.beginPath()
  95. ctx.arc 0,0,10,0,Math.PI*2,true
  96. ctx.fill()
  97. ctx.beginPath()
  98. ctx.arc 95,0,10,0,Math.PI*2,true
  99. ctx.stroke()
  100. ctx.fillStyle = "rgba(0,0,0,0)"
  101. ctx.arc 0,0,3,0,Math.PI*2,true
  102. ctx.fill()
  103. ctx.restore()
  104.  
  105. #画钟的外圈
  106. ctx.beginPath()
  107. ctx.lineWidth = 14
  108. ctx.strokeStyle = '#325FA2'
  109. ctx.arc 0,0,142,0,Math.PI*2,true
  110. ctx.stroke()
  111. ctx.restore()
  112.  
  113. window.requestAnimationFrame clock
  114. return
  115.  
  116. #启动程序
  117. clock()
  118. </script>
  119. </html>

参考自 An animated clock

Coffeescript实现canvas时钟的更多相关文章

  1. 》》canvas时钟

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. 原生js之canvas时钟组件

    canvas一直是前端开发中不可或缺的一种用来绘制图形的标签元素,比如压缩上传的图片.比如刮刮卡.比如制作海报.图表插件等,很多人在面试的过程中也会被问到有没有接触过canvas图形绘制. 定义 ca ...

  3. HTML5之Canvas时钟(网页效果--每日一更)

    今天,带来的是使用HTML5中Canvas标签实现的动态时钟效果. 话不多说,先看效果:亲,请点击这里 众所周知,Canvas标签是HTML5中的灵魂,HTML5 Canvas是屏幕上的一个由Java ...

  4. Canvas - 时钟绘制

    导语:距离上一次写canvas,已经过去两年半,如今业务需要,再次拾起,随手记录. [思考] 时钟的绘制主要在于圆的绘制:1. 使用context.arc()方法直接绘制圆或圆弧: 2. 使用圆的方程 ...

  5. html5 canvas时钟

    基础知识点:                canvas标签只是图形容器,您必须使用脚本来绘制图形. getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性.——获取上 ...

  6. canvas时钟效果

    话不多说,直接上代码 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/x ...

  7. HTML5 Canvas 时钟

    1. [图片] QQ截图20120712130049.png ​2. [代码][HTML]代码 <!DOCTYPE html><html lang="en" &g ...

  8. 简单的canvas时钟

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. canvas 时钟+自由落体

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. 转载自lanceyan: 一致性hash和solr千万级数据分布式搜索引擎中的应用

    一致性hash和solr千万级数据分布式搜索引擎中的应用 互联网创业中大部分人都是草根创业,这个时候没有强劲的服务器,也没有钱去买很昂贵的海量数据库.在这样严峻的条件下,一批又一批的创业者从创业中获得 ...

  2. 【Android自学日记】【转】Android Fragment 真正的完全解析(上)

    自从Fragment出现,曾经有段时间,感觉大家谈什么都能跟Fragment谈上关系,做什么都要问下Fragment能实现不~~~哈哈,是不是有点过~~~ 本篇博客力求为大家说明Fragment如何产 ...

  3. 6 VC维

    1 VC维的定义 VC维其实就是第一个break point的之前的样本容量.标准定义是:对一个假设空间,如果存在N个样本能够被假设空间中的h按所有可能的2的N次方种形式分开,则称该假设空间能够把N个 ...

  4. VS2013 密钥 – 所有版本

    Visual Studio Ultimate 2013 KEY(密钥):BWG7X-J98B3-W34RT-33B3R-JVYW9 Visual Studio Premium 2013 KEY(密钥) ...

  5. 48. 二叉树两结点的最低共同父结点(3种变种情况)[Get lowest common ancestor of binary tree]

    [题目] 输入二叉树中的两个结点,输出这两个结点在数中最低的共同父结点. 二叉树的结点定义如下:  C++ Code  123456   struct BinaryTreeNode {     int ...

  6. Unity3D 原生Android结合UnityPlayerActivity开发遇到的问题

    需求是原生Android 的Activity启动UnityPlayerActivity,按Back键后返回原来的Activity 1.在AndroidManifest.xml中的UnityPlayer ...

  7. sql跨库查询

    ---------------------------------------------------------------------------------- --1. 创建链接服务器 --1. ...

  8. NPA——.NET Persistence API

    你可曾听说过JPA. 有JPA那么就一定有NPA. 软件架构的路上一定少不了这个名词. —————————————————————————————————————————————— P Persist ...

  9. STM8 AWU超低功耗模式

    每次唤醒AWU 中断标志一定要清除 __interrupt void AWU_IRQHandler(void) { AWU->CSR = AWU->CSR; /* 清除更新中断标志位 */ ...

  10. caffe机器学习自带图片分类器classify.py实现输出预测结果的概率及caffe的web_demo例子运行实例

    caffe机器学习环境搭建及python接口编译参见我的上一篇博客:机器学习caffe环境搭建--redhat7.1和caffe的python接口编译 1.运行caffe图片分类器python接口 还 ...