前言

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

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

页面效果如下

原代码如下

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>canvas时钟 - Coffeescript实现</title>

    <script id="others_zepto_10rc1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>

    <script id="others_coffeescript" type="text/javascript" class="library" src="/js/sandbox/other/coffee-script.js"></script>

    </head>

    <body>

        <canvas id="canvas"></canvas>

        <h2>

            Coffeescript 练习

        </h2>

        <p>

            Canvas时钟 - Coffeescript实现

        </p>

        <p>

            参照　<a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">An animated clock</a>

        </p>

    </body>

<script type="text/coffeescript">

clock = ->

  now = new Date()

  ctx = document.getElementById('canvas').getContext '2d'

  ctx.save()

  ctx.clearRect 0,0,150,150

  ctx.translate 75,75

  ctx.scale 0.4,0.4

  ctx.rotate -Math.PI/2

  ctx.strokeStyle = "black"

  ctx.fillStyle = "white"

  ctx.lineWidth = 8

  ctx.lineCap = "round"

  #画12个小时的标刻

  ctx.save()

  for i in [0..11]

    ctx.beginPath()

    ctx.rotate Math.PI/6

    ctx.moveTo 100,0

    ctx.lineTo 120,0

    ctx.stroke()

  ctx.restore()

  #画60个分钟的标刻

  ctx.save()

  ctx.lineWidth = 5

  for i in [0..59]

    if i%5 isnt 0

      ctx.beginPath()

      ctx.moveTo 117,0

      ctx.lineTo 120,0

      ctx.stroke()

    ctx.rotate Math.PI/30

  ctx.restore()  

  sec = now.getSeconds()

  min = now.getMinutes()

  hr  = now.getHours()

  hr = if hr >= 12 then hr-12 else hr

  ctx.fillStyle = "black"

  #画时针

  ctx.save()

  ctx.rotate hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec

  ctx.lineWidth = 14

  ctx.beginPath()

  ctx.moveTo -20,0

  ctx.lineTo 80,0

  ctx.stroke()

  ctx.restore()

  #画分针

  ctx.save()

  ctx.rotate (Math.PI/30)*min + (Math.PI/1800)*sec

  ctx.lineWidth = 10

  ctx.beginPath()

  ctx.moveTo -28,0

  ctx.lineTo 112,0

  ctx.stroke()

  ctx.restore()

  #画秒针

  ctx.save()

  ctx.rotate sec * Math.PI/30

  ctx.strokeStyle = "#D40000"

  ctx.fillStyle = "#D40000"

  ctx.lineWidth = 6

  ctx.beginPath()

  ctx.moveTo -30,0

  ctx.lineTo 83,0

  ctx.stroke()

  ctx.beginPath()

  ctx.arc 0,0,10,0,Math.PI*2,true

  ctx.fill()

  ctx.beginPath()

  ctx.arc 95,0,10,0,Math.PI*2,true

  ctx.stroke()

  ctx.fillStyle = "rgba(0,0,0,0)"

  ctx.arc 0,0,3,0,Math.PI*2,true

  ctx.fill()

  ctx.restore()

  #画钟的外圈

  ctx.beginPath()

  ctx.lineWidth = 14

  ctx.strokeStyle = '#325FA2'

  ctx.arc 0,0,142,0,Math.PI*2,true

  ctx.stroke()

  ctx.restore()

  window.requestAnimationFrame clock

  return

#启动程序

clock()

    </script>

</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. C和指针 第十五章 习题

    15.8 十六进制倾印码 #include <stdio.h> #include <stdlib.h> #include <string.h> #include & ...

  2. Android开发 default activity not found

    新建的项目,今天打开的时候,发现无法编译了.编译按钮无法点击,必须edit configuration.并且报错 default activity not found. 解决: 少写了一个" ...

  3. document封装一些常用的方法

    /** * 批量修改元素样式 */ function css(domObj,styleArry){ for(var i=0;i<styleArry.length;i++){ domObj.sty ...

  4. mysql使用load导入txt文件所遇到的问题及解决方法

    导入txt文件,有导入向导这种方式: 另外可以使用load的方式导入.最开始使用以下代码插入: load data local infile 'F:\\Data\\predict_data.txt' ...

  5. Python语言常见异常错误类型

    在运行或编写一个程序时常会遇到错误异常,这时python会给你一个错误提示类名,告诉出现了什么样的问题(Python是面向对象语言,所以程序抛出的异常也是类).能很好的理解这些错误提示类名所代表的意思 ...

  6. thinkpad W500S 如何换键盘？

    tHINKPAD的笔记本拆装有,123456789... 至少5种以上了,一般键盘去下都是边上撬就去下 来了.今天拆换W550S键盘就遇到劲敌了.拼了 老劲也去不下,冬天背上都冒汗(屋子热的吧). 终 ...

  7. 关于httpd服务的安装、配置

    httpd是Apache超文本传输协议(HTTP)服务器的主程序.通常,httpd不应该被直接调用,而应该在linux系统中由 apachectl 调用.接下来我们将了解有关httpd服务的安装与配置 ...

  8. foxmail邮箱，签名中如何添加当前日期

    菜单--工具--模板管理 当前HTML模板中光标定位在签名之前,然后进行操作:插入宏--当前日期,适当调整位置即可 最下方为新邮件选择HTML模板 新建一封邮件试试吧

  9. 【安装Redis】CentOS7 下安装NodeJs+Express+MongoDB+Redis

    Redis,V3.2,官网l官方链接:http://www.redis.io/download,参考:http://blog.csdn.net/mlks_2008/article/details/19 ...

  10. 【Django】--基础知识

    一 什么是web框架? 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单地说,就是你用别人搭建好的舞台来做表演. Web应 ...