canvas绘制时钟的小练习
之前最开始学前端的时候，尝试写了一个小时钟，当时的思路很不清晰，而且采用的是纯面向过程的方式，而且也只是单纯的动画效果，没有跟date对象结合起来。
这段时间一直在看岑安大神的博客，每看一遍都不禁感叹自己真是菜到家。。。。/(ㄒoㄒ)/~~他的代码真的是很优雅。于是乎，我按照大神一般写代码的方式，通过原型模式加构造函数的方法，重新写了一下时钟的功能。先看下效果：
附上代码如下：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>钟表</title> <script type="text/javascript"> var Clock = function () { var $ = function(id){return document.getElementById(id)}, addListener = function(obj, e, fn) { obj.addEventListener ? obj.addEventListener(e, fn, false) : obj.attachEvent('on' + e, function() { fn.call(obj)}); }; /** * canvas 画布id */ var init = function (canvas) { this.cvs = $(canvas); this.ctx = this.cvs.getContext('2d'); //获取上下文 this.canvas_w = this.cvs.offsetWidth; this.canvas_h = this.cvs.offsetHeight; this.initClock(); this.start(); } init.prototype = { constructor: init, start: function() { //得到当前时间 var date = new Date(); var h = date.getHours(); var m = date.getMinutes(); var s = date.getSeconds(); var _this = this; setInterval(function(){ _this.runClock(s,m,h); s++; },1000); }, initClock: function() { var _this = this; var ctx = _this.ctx; var rd = 150; var w = _this.canvas_w; var h = _this.canvas_h; ctx.beginPath(); ctx.strokeStyle = "red"; ctx.lineWidth = 2; ctx.arc(w*.5, h*.5, rd, 0, Math.PI*2, true); ctx.stroke(); ctx.closePath(); ctx.font = "20px Georgia"; ctx.translate(w*.5, h*.5); ctx.textBaseline = "middle"; ctx.textAlign = "center"; var t; for(var i = 0; i < 12; i++) { if (i<6) { t = Math.PI - 30*(i+1)*Math.PI/180; ctx.fillText(i + 1,(rd-20) * Math.sin(t), (rd-20) * Math.cos(t)); } else { t = Math.PI*2 - (30*(i+1)*Math.PI/180 - Math.PI); ctx.fillText(i + 1,(rd-20) * Math.sin(t), (rd-20) * Math.cos(t)); } } ctx.transform(-1,0,0,-1,0,0); ctx.transform(-1,0,0,1,0,0); }, runClock: function(s,m,h) { var angle = Math.PI * 2 / 60; var sAngle = s * angle, mAngle = m * angle + sAngle / 60, hAngle = h * angle * 5 + mAngle / 12; this.clearCircle(110); var ctx = this.ctx; ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(40*Math.sin(hAngle), 40*Math.cos(hAngle)); ctx.closePath(); this.strokeLine(ctx, "5", "blue"); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(55*Math.sin(mAngle), 55*Math.cos(mAngle)); ctx.closePath(); this.strokeLine(ctx, "3", "black"); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(70*Math.sin(sAngle), 70*Math.cos(sAngle)); ctx.closePath(); this.strokeLine(ctx, "2", "purple"); }, clearCircle: function(radius) { var ctx = this.ctx; ctx.beginPath(); ctx.arc(0,0,radius,0,Math.PI*2,false); ctx.strokeStyle="red"; ctx.lineWidth = "3"; ctx.stroke(); ctx.fillStyle="white"; ctx.fill(); ctx.closePath(); }, strokeLine: function(ctx,lineWidth, lineColor) { ctx.strokeStyle = lineColor; ctx.lineWidth = lineWidth; ctx.stroke(); } } return init; }(); </script> </head> <body> <canvas id="clock" width="500px" height="500px"></canvas> <script type="text/javascript"> var myClock = new Clock('clock', {}); </script> </body> </html>
之前的代码：
//window.onload=init(); window.addEventListener("load",init); function init(){ var rHour=60; //时针的长度 var rMin=80; //分针的长度 var rSec=100; //秒针的长度 var w=2*Math.PI/60; var numSec=0; //second var numMin=0; //minute var numHour=0; //hour var canvas=document.getElementById("mycanvas"); var ctx=canvas.getContext("2d"); ctx.strokeStyle="#ff2421"; ctx.beginPath(); ctx.arc(200,200,150,0,2*Math.PI); //外圆圈 ctx.moveTo(345,200); ctx.arc(200,200,145,0,2*Math.PI); //内圆圈 ctx.moveTo(205,200); ctx.arc(200,200,5,0,2*Math.PI); //圆心 ctx.translate(200,200); //将坐标原点变换到圆心 ctx.moveTo(0,0); ctx.lineTo(0,-100); ctx.stroke(); ctx.rotate(-Math.PI*0.5); ctx.closePath(); function draw(){ ctx.clearRect(-100,-100,200,200); ctx.beginPath(); //画时针 ctx.moveTo(0,0); ctx.lineTo(rHour*Math.cos(w*numHour),rHour*Math.sin(w*numHour)); //画分针 ctx.moveTo(0,0); ctx.lineTo(rMin*Math.cos(w*numMin),rMin*Math.sin(w*numMin)); //画秒针 ctx.moveTo(0,0); ctx.lineTo(rSec*Math.cos(w*numSec),rSec*Math.sin(w*numSec)); ctx.stroke(); ctx.moveTo(5,0); ctx.arc(0,0,5,0,2*Math.PI); ctx.stroke(); ctx.closePath(); if(numSec<60){ numSec=numSec+1; } else{ numMin=numMin+1; numSec=0; } if(numMin==60){ numHour=numHour+1; numHour=numHour%60; numMin=0; } console.log(numSec); } //draw(); setInterval(draw,1000); }
看到了自己的进步，O(∩_∩)O哈哈~
