前言

　　参照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接口 还 ...