绘制钟表_vue css时钟刻度-CSDN博客

本文链接：https://blog.csdn.net/yl107/article/details/75208243
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #mycanvas{
            border:1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas" width="500" height="500"></canvas>
    <script type="text/javascript">
        var mycanvas = document.getElementById('mycanvas');
        var context = mycanvas.getContext('2d');
        context.translate(250,250);
        // 存储坐标系状态
        context.save();
        // 创建绘制表盘函数
        function biaopan(){
            // 绘制表盘
            context.beginPath();
            context.arc(0,0,250,0,Math.PI*2,true);
            context.closePath();
            context.fillStyle = 'black';
            context.fill();
            context.beginPath();
            context.arc(0,0,230,0,Math.PI*2,true);
            context.closePath();
            context.fillStyle = 'burlywood';
            context.fill();
            // 通过循环绘制刻度
            for(var i=0; i<60; i++){
                context.beginPath();
                if(i % 5 == 0){
                    context.fillStyle = '#000';
                    context.fillRect(-4,-230,8,20);

                }else{
                    context.fillStyle = 'gray';
                    context.fillRect(-2,-230,4,10);
                }
                context.closePath();
                context.rotate(Math.PI*2/60);
            }
        }
        // 创建方法绘制表针
        function point(){
            var date = new Date();
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();

            // 绘制时针
            // 恢复坐标系状态
            context.restore();
            context.save();
            context.rotate(Math.PI + Math.PI*2/12*h + Math.PI*2/12*m/60);
            context.beginPath();
            context.lineCap = 'round';
            context.moveTo(0,0);
            context.lineTo(0,130);
            context.closePath();
            context.lineWidth = 8;
            context.strokeStyle = 'blue';
            context.stroke();

            // 绘制分针
            // 恢复坐标系状态
            context.restore();
            context.save();
            context.rotate(Math.PI + Math.PI*2/60*m + Math.PI*2/60*s/60);
            context.beginPath();
            context.moveTo(0,0);
            context.lineTo(0,170);
            context.closePath();
            context.lineWidth = 5;
            context.lineCap = 'round';
            context.strokeStyle = 'green';
            context.stroke();

            // 绘制秒针
            // 恢复坐标系状态
            context.restore();
            context.save();
            context.rotate(Math.PI + Math.PI*2/60*s);
            context.beginPath();
            context.lineCap = 'round';
            context.moveTo(0,0);
            context.lineTo(0,220);
            context.closePath();
            context.lineWidth = 3;
            context.strokeStyle = '#000';
            context.stroke();

            // 绘制圆心
            context.restore();
            context.save();
            context.beginPath();
            context.arc(0,0,10,0,Math.PI*2,true);
            context.fillStyle = '#000';
            context.fill();
            context.close();
        }
        setInterval(function(){
            context.clearRect(0,0,mycanvas.width,mycanvas.height);
            biaopan();
            point();
        },1);
    </script>
</body>
</html>