Canvas--创意时钟_canvas创意-CSDN博客

本文链接：https://blog.csdn.net/zhang_xiansen/article/details/70163945

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        canvas{
            margin: 0 auto;
            display: block;
            background: #cccccc;
        }
    </style>
    <script type="text/javascript">
        //弧度
        function d2a(n){
            return n*Math.PI/180;
        }
        //随机数
        function rnd(n,m){
            return Math.floor(Math.random()*(m-n)+n);
        }
        //补零
        function toDou(iNum){
            if(iNum<10){return '0'+iNum;}
            else{return ''+iNum;}
        }

        document.addEventListener('DOMContentLoaded',function(){
               var oC=document.querySelector('canvas');
               var gd=oC.getContext('2d');
               var cx=400;
               var cy=300;

            function drawArc(start,end,r,color){
                var start=start-90;
                var end=end-90;

                //画圆
                gd.beginPath();
                gd.lineWidth=20;
                gd.strokeStyle=color||'#000';
                gd.arc(cx,cy,r,d2a(start),d2a(end),false);
                gd.stroke();
            }
            function tick(){
                gd.clearRect(0,0,oC.width,oC.height);  //清空画布
                //获取时间对象
                var oDate=new  Date();
                var h=oDate.getHours();
                var m=oDate.getMinutes();
                var s=oDate.getSeconds();
                var ms=oDate.getMilliseconds();

                drawArc(0,s*6+ms/1000*6,120,'#f00');
                drawArc(0,m*6+s/60*6,100,'#399');
                drawArc(0,h%12*30+m/60*30,80,'#000');

                //加文字
                gd.beginPath();
                gd.lineWidth=1;
                gd.textAlign='center';
                gd.font='30px 黑体';
                gd.strokeText('时钟',cx,cy-140);
                gd.beginPath();
                gd.fillText(toDou(h)+':'+toDou(m)+':'+toDou(s),cx,cy);

            }
            tick();
            setInterval(tick,16);
        },false);
    </script>
</head>
<body>
 <canvas width="800" height="600"></canvas>
</body>
</html>

效果图