canvas写的时钟

最新推荐文章于 2020-04-22 22:34:18 发布
原创最新推荐文章于 2020-04-22 22:34:18 发布 · 137 阅读
CC 4.0 BY-SA版权
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            canvas{
                border: 1px solid #000;
                display: block;
                margin: 0 auto;
                background-color: #eee;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="500px" height="500px" ></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");

            var width = canvas.width;
            var height = canvas.height;

            var r = width / 2;
            function fun(){
                context.save()


//              把canvas的中心点变成00点，方便计算
                context.translate(r,r);
//              开始绘制大圆
                context.beginPath();
                context.lineWidth = 10
                context.arc(0,0,r-5,0,Math.PI * 2);
                context.closePath();
                context.stroke()


//              开始绘制数字
                var hournums = [3,4,5,6,7,8,9,10,11,12,1,2];   //存放小时数的数组
                context.font = "20px Arial";
                context.textAlign = "center";
                context.textBaseline = "middle";
                for(var i = 0;i < hournums.length;i++){
                    var rad = Math.PI * 2 / 12 * i;    //获取当前的弧度
                    var x = Math.cos(rad) * (r - 30);
                    var y = Math.sin(rad) * (r - 30);
                    context.fillText(hournums[i],x,y)
                }


                for(var j = 0;j < 60;j++){
                    var radd = Math.PI * 2 / 60 * j;
                    var x1 = Math.cos(radd) * (r - 15)
                    var y1 = Math.sin(radd) * (r - 15)
                    context.beginPath();
                    if(j % 5 == 0){
                        context.fillStyle = "#000";
                    }else{
                        context.fillStyle = "#aaa";
                    }
                    context.arc(x1,y1,2,0,Math.PI * 2);
                    context.closePath();
                    context.fill()
                }

            }
            function drawHour(hour,minu){
//              绘制之前先把环境进行保存
                context.save();
                context.beginPath();
//              把旋转所对应的弧度计算
                var rad = Math.PI * 2 / 12 * hour;
//              计算出分钟所带来的影响
                var mrad = Math.PI * 2 / 12 / 60 * minu;


                context.lineWidth = 8;
                context.lineCap = "round";
                context.rotate(rad + mrad);
                context.moveTo(0,10);
                context.lineTo(0,-r/2);
                context.stroke();

//              绘制完成以后，再恢复以前的状态
                context.restore();
            }
            function drawMinu(minu){
//              绘制之前先把环境进行保存
                context.save();
                context.beginPath();
//              把旋转所对应的弧度计算
                var rad = Math.PI * 2 / 60 * minu;
                context.lineWidth = 4;
                context.lineCap = "round";
                context.rotate(rad);
                context.moveTo(0,10);
                context.lineTo(0,-r + 38);
//              context.closePath();
                context.stroke();


//              绘制完成以后，再恢复以前的状态
                context.restore();
            }
            function drawSec(sec){
                context.save();

                context.beginPath();
                var rad = Math.PI * 2 / 60 * sec;
                context.rotate(rad);


                context.fillStyle = "red";
                context.moveTo(-2,30);
                context.lineTo(2,30);
                context.lineTo(1,-r + 18);
                context.lineTo(-1,-r+18);


                context.fill();
                context.restore()
            }
            function drawD(){
                context.beginPath();
                context.fillStyle = "#fff"
                context.arc(0,0,2,0,Math.PI * 2);
                context.closePath();
                context.fill()
            }


            function drawAll(){
                context.clearRect(0,0,width,height)
                var date = new Date();
                var hour = date.getHours();                                 
                var minu = date.getMinutes();
                var seco = date.getSeconds();
                fun();
                drawHour(hour,minu);
                drawMinu(minu);
                drawSec(seco)
                drawD()

                context.restore()
            }

            drawAll()

            setInterval(drawAll,1000)



        </script>
    </body>
</html>