利用js+canvas实现的时钟效果图

时间：2022-06-23 11:24:51

canvas+js时钟特效

运用js+canvas方面的知识完成一个时钟的效果图，再利用for循环实现指针的转动效果：

利用js+canvas实现的时钟效果图

<!--网页文档的声明-->

<!doctype html>

<html>

<!--网页的头部-->

 <head>

  <meta charset="UTF-8">

  <!--网页三要素-->

  <meta name="Keywords" content="关键词">

  <meta name="Description" content="关键词描述">

  <title>时钟效果</title>

  <!--CSS层叠样式表   加工 修饰-->

  <style type="text/css">

    *{margin:0;padding:0;}

    body{background:url("img/2.jpg");}

    #canvas{margin:100px auto;display:block;}

  </style>

 </head>

 <!--网页的主体-->

 <body>

    <canvas id="canvas" width="500" height="500">

        你的浏览器需要更新了更新请前往 www.xxx.com*——*

    </canvas>

    <script type="text/javascript">

        var canvas = document.getElementById('canvas');//获取上下文

        var cxt = canvas.getContext('2d');//绘图轨迹  线  圆 矩形..

        /*圆

        cxt.beginPath();//开始

        //cxt.fillStyle = "#006633";填充颜色

        cxt.strokeStyle = "#ff00ff";

        cxt.arc(250,250,200,0,360,false);//画圆方法

        //cxt.fill();填充

        cxt.stroke();

        cxt.closePath();//结束

        */

        clock()

        function clock(){

            cxt.clearRect(0,0,500,500)

            var now = new Date();

            var sec = now.getSeconds();

            var min = now.getMinutes();

            var hour = now.getHours();

                hour = hour + min/60;

                hours = hour>12?hour-12:hour;

            //表盘

            cxt.beginPath();

            cxt.lineWidth =10;//线宽

            cxt.strokeStyle = "#00ccff";

            cxt.arc(250,250,200,0,360,false);

            cxt.stroke();

            cxt.closePath();

            //分秒刻度 60个

            for (var i=0;i<60 ;i++ )

            {

                cxt.save();

                cxt.translate(250,250);

                cxt.rotate(6*i*Math.PI/180);

                cxt.lineWidth = "7";

                cxt.strokeStyle ="#fff";

                cxt.beginPath();

                cxt.moveTo(0,-180);

                cxt.lineTo(0,-190);

                cxt.stroke();

                cxt.closePath();

                cxt.restore();

            }

            //时刻度

            for (var i =0;i<12 ;i++ )

            {

                cxt.save();

                cxt.translate(250,250);

                cxt.rotate(30*i*Math.PI/180);

                cxt.lineWidth = "7";

                cxt.strokeStyle ="#ff0000";

                cxt.beginPath();

                cxt.moveTo(0,-175);

                cxt.lineTo(0,-195);

                cxt.stroke();

                cxt.closePath();

                cxt.restore();

            }

            //时针

            cxt.save();//保存

            cxt.strokeStyle = "yellow"

            cxt.translate(250,250);

            cxt.rotate(30*hours*Math.PI/180);

            cxt.beginPath();

            cxt.moveTo(0,-100);

            cxt.lineTo(0,20);

            cxt.stroke();

            cxt.closePath();

            cxt.restore();

            //分针

            cxt.save();//保存

            cxt.strokeStyle = "#00ff00";

            cxt.lineWidth ="7";

            cxt.translate(250,250);

            cxt.rotate(6*min*Math.PI/180);

            cxt.beginPath();

            cxt.moveTo(0,-130);

            cxt.lineTo(0,20);

            cxt.stroke();

            cxt.closePath();

            cxt.restore();

            //秒针

            cxt.save();

            cxt.strokeStyle = "red";

            cxt.lineWidth ="3";

            cxt.translate(250,250);

            cxt.rotate(6*sec*Math.PI/180);

            cxt.beginPath();

            cxt.moveTo(0,-150);

            cxt.lineTo(0,20);

            cxt.stroke();

            cxt.closePath();

            cxt.beginPath();

            cxt.fillStyle ="gray";

            cxt.arc(0,0,5,0,360,false);

            cxt.fill();

            cxt.beginPath();

            cxt.strokeStyle ="red";

            cxt.arc(0,0,6,0,360,false);

            cxt.stroke();

            cxt.beginPath();

            cxt.lineWidth ="1";

            cxt.strokeStyle ="red";

            cxt.moveTo(0,-150);

            cxt.lineTo(4,-130);

            cxt.stroke();

            cxt.beginPath();

            cxt.lineWidth ="1";

            cxt.strokeStyle ="red";

            cxt.moveTo(0,-150);

            cxt.lineTo(-4,-130);

            cxt.stroke();

            cxt.restore();

        }

        setInterval(clock,1000)

        //console.log(hour+'时'+min+'分'+sec+'秒')

    </script>

 </body>

</html>

相关文章