前言

  参照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. [老文章搬家] [翻译] 深入解析win32 crt 调试堆

    09 年翻译的东西. 原文见:  http://www.nobugs.org/developer/win32/debug_crt_heap.html 在DeviceStudio的Debug编译模式下, ...

  2. Servlet和CGI的区别

    Servlet被服务器实例化后,容器运行其init方法,请求到达时运行其service方法,service方法自动派遣运行与请求对应的doXXX方法(doGet,doPost)等,当服务器决定将实例销 ...

  3. Yii2 手动安装yii2-imagine插件

    由于网络的原因使用composer安装Yii框架,实在太过痛苦,所以这里干脆就手动安装yii-imagine的扩展. 首先下载yii2-image和Imagine扩展库,点击链接就可以从百度云下载上传 ...

  4. centos6.5 mysql-server 5.1.73启动失败

    yum install mysql-server 安装mysql服务端会把相应的客户端也装上 service mysqld start  启动mysql服务 解决办法: 1.chomod 777  / ...

  5. [每日一记] Python报错 IndentationError: unexpected indent

    IndentationError: unexpected indent 代码缩进出现错误 今天这个报错的原因是,早些时候的代码里Tab和空格混起来用了,,,[不是我...是编辑器的锅 不过我已经把Su ...

  6. The specified module could not be found

    打开IIS 信息服务,在左侧找到自己的计算机,点右键,选择属性,在主属性中选编辑,打开“目录安全性”选项卡,单击“匿名访问和验证控制”里的“编辑”按钮,在弹出的对话框中确保只选中了“匿名访问”和“集成 ...

  7. latex公式编号

    1 \begin{flalign*} 2 % In this way (this arrange of &), the equation will in the center and alig ...

  8. [转]python 常用类库!

    Python学习 On this page... (hide) 1. 基本安装 2. Python文档 2.1 推荐资源站点 2.2 其他参考资料 2.3 代码示例 3. 常用工具 3.1 Pytho ...

  9. 我的Hcharts的页面应用

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  10. 【ASP.NET】利用Nuget打包package——命令行方式

    通过命令行 官方说明,可以参考:creating-and-publishing-a-package 如果你希望可以使用图形界面的方式,请参考这篇文章   打包dll   使用如下的命令: nuget  ...