返回顶部

收藏

html5 canvas制作的简单时钟效果

更多
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
            body{background:#ccc;}
            #canvas{background:#fff;}
        </style>
        <script type="text/javascript">
            window.onload=function(){

                var myCanvas=document.getElementById('canvas');
                var ctx=myCanvas.getContext('2d');
                function drawClock()
                {
                    var oDate=new Date();
                    var oHours=oDate.getHours();
                    var oMinutes=oDate.getMinutes();
                    var oSeconds=oDate.getSeconds();

                    var SecondsValue=(-90+oSeconds*6)*Math.PI/180;
                    var MinutesValue=(-90+oMinutes*6)*Math.PI/180;
                    var HoursValue=(-90+oHours*30+oMinutes/2)*Math.PI/180;

                    var x=200;
                    var y=200;
                    var r=150;
                    ctx.clearRect(0,0,400,400);

                    function ClockArc(m,n)
                    {
                        ctx.lineWidth=1;
                        ctx.beginPath();
                        ctx.strokeStyle="black";
                        for(i=0;i<60;i++)
                        {
                            ctx.moveTo(x,y);
                            ctx.arc(x,y,r,i*m*Math.PI/180,(i+1)*m*Math.PI/180,false);
                        }
                        ctx.closePath();
                        ctx.stroke();

                        ctx.fillStyle="white";
                        ctx.beginPath();
                        ctx.moveTo(x,y);
                        ctx.arc(x,y,r*n/20,0,360*Math.PI/180,false);
                        ctx.closePath();
                        ctx.fill();

                    }
                    function dateClick(j,l,w)
                    {
                        ctx.strokeStyle="#334214";
                        ctx.lineWidth=w;
                        ctx.beginPath();
                        ctx.moveTo(x,y);
                        ctx.arc(x,y,r*l/20,j,j,false);
                        ctx.closePath();
                        ctx.stroke();
                    }
                    //表盘
                    ClockArc(6,19);
                    //表盘整点
                    ClockArc(30,18);
                    //秒针
                    dateClick(SecondsValue,17.5,1);
                    //分针
                    dateClick(MinutesValue,15.5,2);
                    //时针
                    dateClick(HoursValue,13.5,3);
                }

                setInterval(drawClock,1000);
                drawClock();
            };
        </script>
        </head>
        <body>
            <canvas id="canvas" width="400" height="400"></canvas>
        </body>
</html>

标签:时钟,html5,javascript

收藏

0人收藏

支持

0

反对

0

相关聚客文章
  1. TAT.iAzrael 发表 2013-02-04 09:56:59 从网页监听Android设备的返回键
  2. David Walsh 发表 2015-11-02 14:11:40 JavaScript Promise API
  3. 歪脖骇客 发表 2014-06-27 02:42:01 Javascript网页截屏的方法
  4. Soledad Penadés 发表 2014-07-22 14:00:01 From Webcam to Animated GIF: the Secret Behind cha
  5. sunny5156 发表 2017-09-05 01:01:11 如何调用chrome的桌面提示框
  6. oldj 发表 2015-09-07 12:50:39 HTML5塔防游戏小更新
  7. 博主 发表 2014-10-12 03:15:19 pjax: 当ajax遇上pushState
  8. zrong 发表 2015-07-29 01:35:00 nodePPT 自定义模版
  9. 屁屁 发表 2012-12-31 06:10:57 我重新认识的移动端Web App
  10. 博主 发表 2015-04-10 02:09:06 说说刚才图片墙的BUG
  11. 尖兵 发表 2016-02-02 15:59:07 2016新三板游戏股投资指南:最赚钱的渠道商反而没有投资空间!
  12. David Walsh 发表 2013-10-31 18:09:15 Meatspaces Chat is Amazing