详解通过Canvas + JS 实现简易的时钟

之前学习了下html5中的canvas元素,为了练练手就实现了一个简易的时钟。时钟本身并不复杂,也没有使用图片进行美化,不过麻雀虽小五脏俱全,下面就与大家分享一下:

实现效果:

详解通过Canvas + JS 实现简易的时钟

html代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />
  5.     <title>Clock</title>
  6.     <style type=“text/css”>
  7.     *{
  8.         margin: 0;
  9.         padding: 0;
  10.     }
  11.     .canvas{
  12.         margin-left: 20px;
  13.         margin-top: 20px;
  14.         border: solid 1px;
  15.     }
  16.     </style>
  17. </head>
  18. <body onload= “main()”>
  19. <canvas class = “canvas” id=“canvasId” width = ‘500px’ height = ‘400px’></canvas>
  20. <script type= “text/javascript” src = “Clock.js”></script>
  21. </body>
  22. </html>

JS代码:

  1. var Canvas = {};
  2. Canvas.cxt = document.getElementById(‘canvasId’).getContext(‘2d’);
  3. Canvas.Point = function(x, y){
  4.     this.x = x;
  5.     this.y = y;
  6. };
  7. /*擦除canvas上的所有图形*/
  8. Canvas.clearCxt = function(){
  9.     var me = this;
  10.     var canvas = me.cxt.canvas;
  11.        me.cxt.clearRect(0,0, canvas.offsetWidth, canvas.offsetHeight);
  12. };
  13. /*时钟*/
  14. Canvas.Clock = function(){
  15.     var me = Canvas,
  16.         c = me.cxt,
  17.         radius = 150/*半径*/
  18.         scale = 20/*刻度长度*/
  19.         minangle = (1/30)*Math.PI, /*一分钟的弧度*/
  20.         hourangle = (1/6)*Math.PI, /*一小时的弧度*/
  21.         hourHandLength = radius/2/*时针长度*/
  22.         minHandLength = radius/3*2/*分针长度*/
  23.         secHandLength = radius/10*9/*秒针长度*/
  24.         center = new me.Point(c.canvas.width/2, c.canvas.height/2); /*圆心*/
  25.     /*绘制圆心(表盘中心)*/
  26.     function drawCenter(){
  27.         c.save();
  28.         c.translate(center.x, center.y);
  29.         c.fillStyle = ‘black’;
  30.         c.beginPath();
  31.         c.arc(00, radius/2002*Math.PI);
  32.         c.closePath();
  33.         c.fill();
  34.         c.stroke();
  35.         c.restore();
  36.     };
  37.     /*通过坐标变换绘制表盘*/
  38.     function drawBackGround(){
  39.         c.save();
  40.         c.translate(center.x, center.y); /*平移变换*/
  41.         /*绘制刻度*/
  42.         function drawScale(){
  43.            c.moveTo(radius – scale, 0);
  44.            c.lineTo(radius, 0);
  45.         };
  46.         c.beginPath();
  47.         c.arc(00, radius, 02*Math.PI, true);
  48.         c.closePath();
  49.         for (var i = 1; i <= 12; i++) {
  50.            drawScale();
  51.            c.rotate(hourangle); /*旋转变换*/
  52.         };
  53.         /*绘制时间(3,6,9,12)*/
  54.         c.font = ” bold 30px impack”
  55.         c.fillText(“3”11010);
  56.         c.fillText(“6”, –7120);
  57.         c.fillText(“9”, –12010);
  58.         c.fillText(“12”, –16, –100);
  59.         c.stroke();
  60.         c.restore();
  61.     };
  62.     /*绘制时针(h: 当前时(24小时制))*/
  63.     this.drawHourHand = function(h){
  64.         h = h === 024: h;
  65.         c.save();
  66.         c.translate(center.x, center.y);
  67.         c.rotate(3/2*Math.PI);
  68.         c.rotate(h*hourangle);
  69.         c.beginPath();
  70.         c.moveTo(00);
  71.         c.lineTo(hourHandLength, 0);
  72.         c.stroke();
  73.         c.restore();
  74.     };
  75.     /*绘制分针(m: 当前分)*/
  76.     this.drawMinHand = function(m){
  77.         m = m === 060: m;
  78.         c.save();
  79.         c.translate(center.x, center.y);
  80.         c.rotate(3/2*Math.PI);
  81.         c.rotate(m*minangle);
  82.         c.beginPath();
  83.         c.moveTo(00);
  84.         c.lineTo(minHandLength, 0);
  85.         c.stroke();
  86.         c.restore();
  87.     };
  88.     /*绘制秒针(s:当前秒)*/
  89.     this.drawSecHand = function(s){
  90.         s = s === 060: s;
  91.         c.save();
  92.         c.translate(center.x, center.y);
  93.         c.rotate(3/2*Math.PI);
  94.         c.rotate(s*minangle);
  95.         c.beginPath();
  96.         c.moveTo(00);
  97.         c.lineTo(secHandLength, 0);
  98.         c.stroke();
  99.         c.restore();
  100.     };
  101.     /*依据本机时间绘制时钟*/
  102.     this.drawClock = function(){
  103.         var me = this;
  104.         function draw(){
  105.            var date = new Date();
  106.            Canvas.clearCxt();
  107.            drawBackGround();
  108.            drawCenter();
  109.            me.drawHourHand(date.getHours() + date.getMinutes()/60);
  110.            me.drawMinHand(date.getMinutes() + date.getSeconds()/60);
  111.            me.drawSecHand(date.getSeconds());
  112.         }
  113.         draw();
  114.         setInterval(draw, 1000);
  115.     };
  116. };
  117.  var main = function(){
  118.     var clock = new Canvas.Clock();
  119.     clock.drawClock();
  120. };

代码中涉及到了一些简单的canvas元素API 大家google一下即可,祝大家学习愉快:-D

原文链接:http://www.cnblogs.com/liubingblog/archive/2015/03/10/4325063.html

未经允许不得转载:JX BLOG » 详解通过Canvas + JS 实现简易的时钟

赞 (0)

评论 0

评论前必须登录!

登陆 注册