Coffeescript实现canvas时钟
前言
参照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>
