前言

　　参照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. js构造函数的方法与原型prototype

    把方法写在构造函数内的情况我们简称为函数内方法,把方法写在prototype属性上的情况我们简称为prototype上的方法 函数内的方法: 使用函数内的方法我们可以访问到函数内部的私有变量,如果我们 ...

  2. Beta版总结会议

    一,设想和目标 1. 我们的软件要解决什么问题?是否定义得很清楚?是否对典型用户和典型场景有清晰的描述? 我们的app要解决一个令人头痛但无人具体来实现的这一社会困扰现象.因为学生或者社会人士在参加竞 ...

  3. Linux开机自动登录（文本模式）

    • Linux系统启动登录过程 以RedHat/CentOS为例,Linux系统Level3模式下从启动到登录的整个过程大致如下: 1> 加载BIOS信息:包含了CPU/显卡/内存/硬盘/网卡等 ...

  4. html5 Websockets development guidance

    1. WebSockets -- full-duplex communication The main HTML5 pillars include Markup, CSS3, and JavaScri ...

  5. Discoverer 11.1.1.3.0以Oracle Application用户登录的必要配置

    客户这边要使用Discoverer来出报表, 就从OTN上下载安装了11.1.1.3.0版本的, 安装很简单, 一路Next, 使用的EBS版本是12.1.1.3, 结果发现用Oracle Appli ...

  6. Netty 实现聊天功能

    Netty 是一个 Java NIO 客户端服务器框架,使用它可以快速简单地开发网络应用程序,比如服务器和客户端的协议.Netty 大大简化了网络程序的开发过程比如 TCP 和 UDP 的 socke ...

  7. Canvas制作天气预报走势图

    要实现的效果如下图: HTML代码如下: ;;;;;;;;;;; }

  8. Apache SolrCloud安装

    1.介绍  SolrCloud通过ZooKeeper集群来进行协调,使一个索引进行分片,各个分片可以分布在不同的物理节点上,多个物理分片组成一个完成的索引Collection.SolrCloud自动支 ...

  9. Fiddler学习笔记

    1. [HTTP]Fiddler(一) - Fiddler简介 Fiddler使用代理(127.0.0.1:8888), 打开Fiddler会自动设置该代理. 2.[HTTP]Fiddler(二) - ...

  10. XUT 1245

    这是一道2016湘潭邀请赛的题目,记得那个时候看到这个题目就想到了最短生成树,然后给别人做,WA了,最后发现是有向图,然后我自己去写了个搜索,结果是RE吧 今天刚刚好想到这个题目,然后再来做,发现这个 ...