canvas绘制闹钟-方法1 原

代码语言：javascript复制
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>canvas</title>
    <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/bootstrap-table.css">
    <link rel="stylesheet" href="css/test.css">
    <style>
    </style>
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <canvas id="canvas" width="400" height="400" style="background:#f2f2f2"></canvas>
    <script>
    
    function clock() {
        var ctx = document.getElementById("canvas").getContext("2d");
        ctx.clearRect(0, 0, 400, 400)
        var now = new Date()
        
        ctx.save(); //第一个save
        //基础设置
        ctx.translate(200, 200)
        //逆时针旋转画布90度，起点为上面的顶部
        ctx.rotate(-Math.PI / 2); 
        ctx.lineWidth = 6
        ctx.lineCap = "round"

        //小时刻度
        ctx.save();
        ctx.strokeStyle = "#666"
        ctx.lineWidth = 4
        for (var i = 0; i < 3; i  ) {
            ctx.beginPath();
            ctx.moveTo(110, 0);
            ctx.lineTo(120, 0);
            ctx.stroke()
            ctx.rotate(Math.PI / 6)
        }
        ctx.restore()

        ctx.save();
        //分钟刻度
        ctx.strokeStyle = "#aaaaaa"
        ctx.lineWidth = 3;
        for (i = 0; i < 60; i  ) {
            if (i % 5 != 0) {
                ctx.beginPath()
                ctx.moveTo(112, 0)
                ctx.lineTo(115, 0)
                ctx.stroke()
            }
            //就算不画线也要旋转度数，所以不放在if里面
            ctx.rotate(Math.PI / 30) 
        }
        ctx.restore()


        var hr = now.getHours();
        var min = now.getMinutes();
        var sec = now.getSeconds();
        hr = hr >= 12 ? hr - 12 : hr

        //时针
        ctx.save();
        //换算成时针的角度，小时是一个圆周分成12份，1小时60分钟，1分钟60秒，
        ctx.rotate(hr * (2 * Math.PI / 12)   (Math.PI / 360) * min   (Math.PI / 21600) * sec) 
        ctx.strokeStyle = "#444"
        ctx.lineWidth = 8;
        ctx.beginPath();
        ctx.moveTo(-20, 0);
        ctx.lineTo(80, 0)
        ctx.stroke();
        ctx.restore()

        // 分针
        ctx.save();
        //换算成分针的角度，分针是一个圆周分成60份，一分钟是60秒
        ctx.rotate((2 * Math.PI / 60) * min   (2 * Math.PI / 3600) * sec) 
        ctx.strokeStyle = "#444"
        ctx.lineWidth = 6;
        ctx.beginPath();
        ctx.moveTo(-28, 0);
        ctx.lineTo(80, 0);
        ctx.stroke();
        ctx.restore()

        //秒针
        ctx.save();
        //秒针的弧度
        ctx.rotate(sec * 2 * Math.PI / 60) 
        ctx.lineWidth = 6;
        ctx.strokeStyle = "#f2751a";
        ctx.beginPath();
        ctx.moveTo(-30, 0)
        ctx.lineTo(86, 0)
        ctx.stroke()

        ctx.beginPath()
        ctx.arc(96, 0, 6, 0, Math.PI * 2, true)
        ctx.stroke()

        ctx.fillStyle = "#a38c65";
        ctx.beginPath()
        ctx.arc(0, 0, 10, 0, Math.PI * 2, true)
        ctx.fill();
        ctx.restore();

        //外面的圆环
        ctx.beginPath();
        ctx.lineWidth = 8;
        ctx.strokeStyle = "#1b9eb6";
        ctx.arc(0, 0, 122, 0, Math.PI * 2, true)
        ctx.stroke()
        
        ctx.restore();//返回到第一个save*/
        window.requestAnimationFrame(clock);

    }
    clock();
    //window.requestAnimationFrame(clock) 也可
    
    </script>
</body>

</html>
总结：角度旋转默认是按右边水平方向，向下旋转，现在逆时针把画布旋转90度，使旋转的起始位置在正上方，画布旋转后x轴与y轴也随着画布旋转而旋转；注意画好图之后再旋转画布，图上面画的图形不会旋转；
(adsbygoogle = window.adsbygoogle || []).push({});
canvas
0 人点赞