前言

  参照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. Ubuntu 中Eclipse 默认的OpenJDK 和 SUNJDK问题总结

    今天 在 Ubuntu 12.04 X86 的虚拟机环境中 搭建C++ 的开发环境,默认 下载了 eclipse-cpp-mars-R-linux-gtk.tar.gz 是带有CDT 的: 关于 CD ...

  2. 为什么类和接口不能使用private和protected?接口的方法不能使用private、protected、default

    对于java程序员来说,java的访问权限修饰词public.protected.default.private的区别和使用肯定都不是问题,这里也不再啰嗦了,反正度娘一搜就一大把.最近在整理java ...

  3. git用法之常用命令

    1.git 安装好后,如何配置? a: 设置本地用户名.邮箱,很重要!之后的每次提交都会用到这两条信息,说明是谁提交了更新. $ git config --global user.name " ...

  4. OSI7层模型详解

    首先我们借用百度百科上的图片来基本了解一下OSI7层模型的名称以及结构.下面我将从最底层一层一层往上介绍. 物理层:基于Bit传输,是属于物理信道,最基本的机械.电子.定时接口通信信道. 数据链路层: ...

  5. VS2015编译boost1.62

    VS2015编译boost1.62 Boost库是一个可移植.提供源代码的C++库,作为标准库的后备,是C++标准化进程的开发引擎之一. Boost库由C++标准委员会库工作组成员发起,其中有些内容有 ...

  6. Linux下的压缩和解压缩命令——zip/unzip

    zip命令 zip是个使用广泛的压缩程序,文件经它压缩后会另外产生具有".zip"扩展名 的压缩文件. 选项: -A   调整可执行的自动解压缩文件. -b<工作目录> ...

  7. Battleships in a Board

    Given an 2D board, count how many different battleships are in it. The battleships are represented w ...

  8. ProtocolBuffers-3 For Objective C (2)-进阶

    先介绍几个常用关键字: equired前缀表示该字段为必要字段,既在序列化和反序列化之前该字段必须已经被赋值.与此同时,在Protocol Buffer中还存在另外两个类似的关键字,optional和 ...

  9. [Android Pro] 完美Android Cursor使用例子(Android数据库操作)

    reference to : http://www.ablanxue.com/prone_10575_1.html 完美 Android Cursor使用例子(Android数据库操作),Androi ...

  10. Web 前端之HTML和CSS

    Web 前端之HTML和CSS HTML被称为超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML使用标记标签 ...