zoukankan      html  css  js  c++  java
  • Html5时钟的实现

          最近准备把自己的博客装修一下,首先,先为自己设计一个时钟吧,希望博客园能够尽快发放给我使用js的权限!

          自从看见了苹果设计的那款因为侵权而赔钱了时钟,我就决定我的时钟一定是要参考这个来设计了!

                                                                collClock

           不得不说,这是一个非常酷的设计!

    准备工作      

    首先,定义一个Canvas

    <div id="mineClock"  style="position:relative;margin:0px auto">
           <canvas id="canvas" style="background-color:#d7d7d7" width="244" height="300">您的浏览器不支持Canvas</canvas>
    </div>


    开始绘制

    绘制此时钟采取的思路是,利用js获取时间,然后将各个时间作为变量设置时针、分针、秒针的旋转角度以及位置,每秒钟刷新一次,然后就能得到一个很酷的模拟时钟!

    <script>
                 var clock = document.getElementById('canvas');
                 var ctx = clock.getContext('2d');
                 function drawTime() {
                     ctx.clearRect(0, 0, 244, 300);
                     var date = new Date();  //获取当前时间
                     var year = date.getFullYear(); 
                     var month = date.getMonth();
                     var day = date.getDate();
                     var week = date.getDay();
                     var hour = date.getHours();
                     var min = date.getMinutes();
                     var sec = date.getSeconds();
    
                     hour = hour + min / 60;
                     hour = hour > 12 ? hour - 12 : hour;
    
                     var width = 244;
                     var height = 280;
                     var dot = {       //时钟中心
                         x: width / 2,
                         y: width / 2,
                         radius: 4
                     }
                     var radius = 115;
                     var maxBorderWidth = 8;
                     var minBorderWidth = 2;
    
    
                      //绘制年月日
                     ctx.fillStyle = "#000";  
                     ctx.font = "30px Lucida Sans Unicode";
                     month = eval(month + 1);  //设置月份,月份得到的值为0·11,所以要加一得到实际值
                     var message = year + " 年" + month + " 月" + day; 
                     ctx.fillText(message, 7, height);  
                     
                     //绘制时钟中心点
                     ctx.lineWidth = maxBorderWidth;
                     ctx.beginPath();
                     ctx.fillStyle = "#e2e2e2";
                     ctx.arc(dot.x, dot.y, radius, 0, 2 * Math.PI, true);
                     ctx.fill();
                     ctx.closePath();
    
    
    
    
                     //绘制时刻度、分刻度
                     
                     for (var i = 0; i < 60; i++) {
    
                         ctx.save();
                         var pointLong;
                         if (i % 5 == 0) {
                             ctx.lineWidth = maxBorderWidth;
                             pointLong = 25;
                         }
                         else {
                             ctx.lineWidth = minBorderWidth;
                             pointLong = 12;
                         }
                         ctx.strokeStyle = "#000";
                         ctx.translate(dot.x, dot.y);
                         ctx.rotate(i * 6 * Math.PI / 180);
                         ctx.beginPath();
                         ctx.moveTo(0, -radius + maxBorderWidth);
                         ctx.lineTo(0, -radius + maxBorderWidth + pointLong);
                         ctx.closePath();
                         ctx.stroke();
                         ctx.restore();
                     }
                     //绘制时针
                     ctx.save();
                     ctx.lineWidth = maxBorderWidth;
                     ctx.translate(dot.x, dot.y);
                     ctx.rotate(hour * 30 * Math.PI / 180);
                     ctx.beginPath();
                     ctx.moveTo(0, -55);
                     ctx.lineTo(0, 25);
                     ctx.closePath();
                     ctx.stroke();
                     ctx.restore();
    
                     //绘制分针
                     ctx.save();
                     ctx.lineWidth = maxBorderWidth;
                     ctx.translate(dot.x, dot.y);
                     ctx.rotate(min * 6 * Math.PI / 180);
                     ctx.beginPath();
                     ctx.moveTo(0, -97);
                     ctx.lineTo(0, 25);
                     ctx.closePath();
                     ctx.stroke();
                     ctx.restore();
                    //绘制秒针
                     ctx.save();
                     ctx.strokeStyle = "red";
                     ctx.lineWidth = minBorderWidth;
                     ctx.translate(dot.x, dot.y);
                     ctx.rotate(sec * 6 * Math.PI / 180);
                     ctx.beginPath();
                     ctx.moveTo(0, -75);
                     ctx.lineTo(0, 25);
                     ctx.closePath();
                     ctx.stroke();
                     ctx.beginPath();
                     ctx.fillStyle = '#D6231C';
                     ctx.arc(0, -75, 6, 0, 2 * Math.PI, true);  //绘制秒针针尖的小圆点
                     ctx.fill();
                     ctx.closePath();
                     ctx.restore();
                    //装饰时钟中心  两个小圆叠加
                     ctx.beginPath();
                     ctx.fillStyle = '#982127';
                     ctx.arc(dot.x, dot.y, dot.radius, 0, 2 * Math.PI, true);
                     ctx.fill();
                     ctx.closePath();
    
                     ctx.beginPath();
                     ctx.fillStyle = '#D6231C';
                     ctx.arc(dot.x, dot.y, 2, 0, 2 * Math.PI, true);
                     ctx.fill();
                     ctx.closePath();
                    //再时钟上添加签名
                     ctx.fillStyle = "#000";
                     ctx.font = "15px Comic Sans MS";
                     ctx.fillText("Chal Mine", dot.x-30, dot.y+50);
                 }
                 setInterval(drawTime, 1000);  //每秒刷新
        </script>

    如果你拥有了博客园的js权限,那么你就可以将此时钟添加到博客园的侧边栏了!

    我不追求自己是何等的完美,但我追求每一天的提高!
  • 相关阅读:
    BFS(广搜训练题目)
    练习赛1(补题)
    练习赛1(AC题)
    codeup 1743: 算法3-4:表达式求值
    数学相关(更新ing)
    c语言常用函数(更新ing)
    大牛的博客(学习不止,更新不止)
    51nod 1005 大数加法
    js1-----预览js内容
    css10---转载---定位,浮动
  • 原文地址:https://www.cnblogs.com/minesky/p/3378872.html
Copyright © 2011-2022 走看看