canvas制作时钟

最新推荐文章于 2021-06-18 20:14:24 发布
卟良亻
最新推荐文章于 2021-06-18 20:14:24 发布
阅读量86
点赞数
本文链接：https://blog.csdn.net/weixin_42595284/article/details/82633988
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        canvas{
            border: 1px solid #ccc;
            display: block;
            margin: 50px auto;
            background: url(image/bg.jpg);
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <canvas width="500" height="500"></canvas>
    <script>

        //构造函数
        function Clock() {
            this.ctx = document.querySelector('canvas').getContext('2d');
        }
        //原型
        Clock.prototype = {
            //初始化
            init: function(){
                this.ctx.clearRect(0,0,500,500)
                this.getTime();
                this.bgImage();
                this.drawScale();
                this.drawClockWise();

            },
            //画圆
            bgImage:function(){
                this.ctx.beginPath();
                this.ctx.arc(250,250,250,0,Math.PI*2,true);
                this.ctx.strokeStyle = "#333";
                this.ctx.lineWidth = "5";
                this.ctx.stroke();
                this.ctx.clip();//裁剪

                // var img = new Image();
                // img.src = "image/bg.jpg";
                // console.log('111');
                // this.ctx.drawImage(img,0,0,800,800);
                this.ctx.closePath();

            },
            //刻度
            drawScale: function(){
                //时刻度
                for (var i = 0; i < 12; i++) {
                    this.ctx.beginPath()
                    this.ctx.save();//保存当前位置
                    this.ctx.translate(250,250);
                    this.ctx.rotate(i * Math.PI/6);
                    this.ctx.lineWidth = 5;
                    this.ctx.moveTo(0,-245);
                    this.ctx.lineTo(0,-225);
                    this.ctx.stroke();
                    this.ctx.restore();
                }
                //分刻度
                for (var i = 0; i < 60; i++) {
                    this.ctx.beginPath()
                    this.ctx.save();//保存当前位置
                    this.ctx.translate(250,250);
                    this.ctx.rotate(i * Math.PI/30);
                    this.ctx.lineWidth = 5;
                    this.ctx.moveTo(0,-245);
                    this.ctx.lineTo(0,-235);
                    this.ctx.stroke();
                    this.ctx.restore();
                }
            },
            //针
            drawClockWise:function(){
                //时针
                this.ctx.beginPath();
                this.ctx.save();
                this.ctx.translate(250,250);
                this.ctx.rotate(this.hours *Math.PI/6)
                this.ctx.lineWidth = 5;
                this.ctx.moveTo(0,0);
                this.ctx.lineTo(0,-100);
                this.ctx.lineCap = 'round';
                this.ctx.stroke();
                this.ctx.restore();
                //分针
                this.ctx.beginPath();
                this.ctx.save();
                this.ctx.translate(250,250);
                this.ctx.rotate(this.min * 6 * Math.PI/180)
                this.ctx.lineWidth = 2;
                this.ctx.moveTo(0,0);
                this.ctx.lineTo(0,-170);
                this.ctx.lineCap = 'round';
                this.ctx.stroke();
                this.ctx.restore();
                //秒针
                this.ctx.beginPath();
                this.ctx.save();
                this.ctx.translate(250,250);
                this.ctx.rotate(this.sec*6*Math.PI/180)
                this.ctx.lineWidth = 1;
                this.ctx.moveTo(0,0);
                this.ctx.lineTo(0,-200);
                this.ctx.lineCap = 'round';
                this.ctx.stroke();
                this.ctx.restore();
                //中心的圆
                this.ctx.beginPath();
                this.ctx.save();
                this.ctx.arc(250,250,8,0,Math.PI*2);
                this.ctx.fillStyle = 'yellow';
                this.ctx.fill()
                this.ctx.stroke();
                this.ctx.restore();
                //秒针上的圆
                this.ctx.beginPath();
                this.ctx.save();
                this.ctx.translate(250,250);
                this.ctx.rotate(this.sec*6*Math.PI/180)
                this.ctx.lineWidth = 1;
                this.ctx.arc(0,-170,3,0,Math.PI*2);
                this.ctx.fillStyle = 'yellow';
                this.ctx.fill()
                this.ctx.stroke();

                this.ctx.restore();
            },
            //获取当前时间
            getTime:function(){
                this.today = new Date()
                this.hours = this.today.getHours();
                this.min = this.today.getMinutes();
                this.sec = this.today.getSeconds();
                // console.log(this.today);
                //把时针转化成12制
                this.hours = this.hours > 12 ? (this.hours-12):this.hours;
                //为了解决时针不变的bug
                this.hours = this.hours + this.min/60;
            }
        }
        //实例化对象
        var clock = new Clock();
        window.onload = function(){
            clock.init();
        };
        setInterval(function(){
            clock.init()
        },1000);
    </script>
</body>
</html>