canvas绘制钟表

html:

<body>
        <canvas width="1200" height="500" id="canvans"></canvas>
</body>

css

<style type="text/css">
    canvas {
        background-color: lavender;
        margin-left: 60px;
    }
</style>

<script type="text/javascript">
        function draw() {
            var can = document.getElementById("canvans");
            var pen = can.getContext("2d");

            pen.clearRect(0, 0, can.width, can.height);


            /*钟表阴影*/
            pen.shadowOffsetX = 10;
            pen.shadowOffsetY = 10;
            pen.shadowBlur = 14;
            pen.shadowColor = "rgba(0,0,0,0.5)";

            /*画出钟表外框*/
            pen.save();
            pen.beginPath();
            pen.lineWidth = 11;
            pen.strokeStyle = "#363636";
            pen.arc(600, 250, 150, 0, Math.PI * 2, true);
            pen.stroke();
            pen.fillStyle = "rgba(255, 240, 245,0.8)";
            pen.fill();
            pen.closePath();
            pen.restore();


            /*画出小时刻度*/
            pen.lineWidth = 3;
            pen.strokeStyle = "rgba(0,0,0,0.8)";

            for (var i = 0; i < 12; i++) {
                pen.save();
                pen.beginPath();
                pen.translate(600, 250);
                pen.rotate(Math.PI * 30 * i / 180);
                pen.lineWidth = 3;
                pen.moveTo(0, -130);
                pen.lineTo(0, -150);
                pen.stroke();
                pen.closePath();
                pen.restore();
            }


            /*画出分针刻度*/
            pen.lineWidth = 1;

            for (var i = 0; i < 60; i++) {
                pen.save();
                pen.beginPath();
                pen.translate(600, 250);
                pen.rotate(Math.PI * 6 * i / 180);
                pen.moveTo(0, -150);
                pen.lineTo(0, -140);
                pen.stroke();
                pen.restore();
            }

            /*数字*/
            for (var i = 1; i <= 12; i++) {
                pen.save();
                pen.beginPath();
                pen.fillStyle = "black";
                pen.font = "14px Arial";
                pen.translate(600, 250);
                var clockRadius = 167;
                var theta = (i - 3) * (Math.PI * 2) / 12;
                var x = clockRadius * 0.7 * Math.cos(theta);
                var y = clockRadius * 0.7 * Math.sin(theta);
                pen.fillText(i, x - 5, y + 5);
                pen.closePath();
                pen.restore();
            }


            /*画出钟表中心的点*/
            pen.beginPath();
            pen.save();
            pen.lineWidth = 1;
            pen.translate(600, 250);
            pen.fillStyle = "rgba(0,0,0,0.8)";
            pen.arc(0, 0, 5, 0, Math.PI * 2, true);
            pen.fill();
            pen.closePath();
            pen.restore();

            /*获取当前时间*/
            var time = new Date();
            var hour = time.getHours();
            var min = time.getMinutes();
            var sec = time.getSeconds();

            /*秒针转动*/
            pen.save();
            pen.beginPath();
            pen.translate(600, 250);
            pen.rotate(Math.PI * 6 * sec / 180);
            pen.lineWidth = 2;
            pen.moveTo(0, 0);
            pen.lineTo(0, -110);
            pen.stroke();
            pen.closePath();
            pen.restore();

            /*秒针修饰*/
            pen.save();
            pen.beginPath();
            pen.translate(600, 250);
            pen.rotate(Math.PI * 6 * sec / 180);
            pen.lineWidth = 2;
            pen.arc(0, -90, 3, 0, Math.PI * 2, true);
            pen.stroke();
            pen.fillStyle = "rgba(255, 240, 245,0.8)";
            pen.fill();
            pen.closePath();
            pen.restore();

            /*分针转动*/
            pen.save();
            pen.beginPath();
            pen.translate(600, 250);
            pen.rotate(Math.PI * 6 * min / 180);
            pen.lineWidth = 3;
            pen.moveTo(0, 0);
            pen.lineTo(0, -90);
            pen.stroke();
            pen.closePath();
            pen.restore();

            /*时针转动*/
            pen.save();
            pen.beginPath();
            pen.translate(600, 250);
            pen.rotate(Math.PI * 30 * hour / 180);
            pen.lineWidth = 5;
            pen.moveTo(0, 0);
            pen.lineTo(0, -60);
            pen.stroke();
            pen.closePath();
            pen.restore();

            window.requestAnimationFrame(draw);
        }

        window.onload = function() {

            draw();

        };
    </script>

相关阅读:
javascript 使用链式结构
 javascript 闭包
 javascript 使用canvas绘画
 （14）javascript 函数表达式递归、闭包
 （13）javascript 面向对象创建对象
 wpf和winform的区别
 XtraReport1添加参数
 {$DEFINE WANYI}
$('#myModal').modal('show') //显示$('#myModal').modal('hide')隐藏
 计算机音视频技术
原文地址：https://www.cnblogs.com/angenstern/p/14327840.html