前言

  参照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. Ruby安装Scss

    Ruby安装Scss 引言 已经许久不写HTML了,今天有点以前的东西要改.但是刚装的Windows10,已经没有以前的Web开发环境了.只好重新安装. 结果Webstorm装好后配置Scss出现错误 ...

  2. Json在PHP与JS之间传输

    1. JS-->PHP a). JS create Json <script> $(document).ready(function(){ /*--JS create Json--* ...

  3. Android开发 default activity not found

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

  4. BZOJ2802——[Poi2012]Warehouse Store

    1.题目巨短,自己看看吧 2.分析:这道题,想了半天dp还是想不到,最后看题解发现是个贪心的思想,我们维护一个堆,如果这个人不能加入就把他和堆上最大的进行比较,然后搞搞就行了 #include < ...

  5. windows 上vmare超卡的问题解决方案

    http://www.cnblogs.com/jlwen/p/3553722.html

  6. iOS url中文编码

    有两种方法: 一,使用NSString的方法: NSString* string2 = [string1 stringByAddingPercentEscapesUsingEncoding:NSUTF ...

  7. Lintcode 375.克隆二叉树

    -------------------------- 水题 AC代码: /** * Definition of TreeNode: * public class TreeNode { * public ...

  8. Webbench性能测试

    1.下载安装:立即下载  官网:http://home.tiscali.cz/~cz210552/webbench.html 2.解压缩:tar -zxvf webbench-1.5.tar.gz 3 ...

  9. Python +crontab定时备份目录发送邮件

    公司有一台静态页面展示服务器仅供给客户展示我们做的项目,当时买的时候是最低配,也就是磁盘空间为20G的系统盘,考虑到代码量很小所以没有另加磁盘,后来项目多了,就写了个crontab 定时备份目录. 就 ...

  10. Blender 之修改器代码分析

                           Blender的修改器(modifier)模块,默认界面右下块(Property)面板的扳手,分类(修改.生成.形变.模拟)列出所有的修改器.也可以空格键 ...