荐 用canvas画时钟（一步步详解附带源代码）

canvas绘图

该元素负责在页面中设定一个区域，然后由js动态地在这个区域中绘制图形。这个技术最早是由美国苹果公司推出的，目的是为了取代flash，很快主流浏览器都支持它。

绘制路径

要绘制路径首先必须调用beginPath()方法，如果想绘制一条连接到起点的线条则调用closePath()方法；如果路径已完成，你想用fillStyle填充它，可以调用fill()方法。另外还可以调用stroke()方法对路径描边，使用strokeStyle。

接口	参数	功能
rect（）	x,y,width,height	从点x,y开始绘制一个矩形，宽和高分别由width和height指定，这个方法是绘制路径。而不是fillRect()和strokeRect()所绘制的独立形状
arc()	x,y,radius,startAngle,endAngle,counterclockwise 六个参数	以x,y为圆心绘制一条弧线，半径为radius，起始和结束角度分别为startAngle和endAngle，最后一个参数表示角度是否按逆时针方向计算，值为false表示顺时针。
lineTo()	x,y	从上一点开始绘制一条直线，到x,y为止
moveTo()	x,y	将绘图游标移动到x,y，不画线。

按照上图，就能画出圆，半圆，，四分之一圆等等。

开始画图

1.先设置一块画布。

<style>
        .cvs {
        	border：solid 1px blue;  //加一个边框更容易确定位置
            display: block;		//把canvas设置为块
            margin: auto;		//canvas居中显示
        }
    </style>
    <canvas class="cvs" width="500px" height="500px"></canvas>

2.画一个圆，并将圆心坐标重新设为（0，0）

var c = document.getElementsByClassName('cvs')[0]
        var cv = c.getContext('2d')
        cv.translate(250, 250)

        function yuan() {
            cv.lineWidth = 10;
            cv.beginPath()
            cv.arc(0, 0, 245, 0, 2 * Math.PI, false)
            cv.closePath()
            cv.stroke()
        }

3.在钟面上标上时间和刻度

function num() {
            var nums = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
            for (i = 0; i < nums.length; i++) {
                var rad = 2 * Math.PI / 12 * i;
                var x = Math.cos(rad) * 215;
                var y = Math.sin(rad) * 215;
                cv.font = "20px Georgia";
                cv.textBaseline = 'middle';
                cv.textAlign = "center";
                cv.fillText(nums[i], x, y);
            }
            for (i = 0; i < 60; i++) {
                var rad = 2 * Math.PI / 60 * i;
                var x = Math.cos(rad) * 230;
                var y = Math.sin(rad) * 230;
                cv.beginPath();
                if (i % 5 == 0) {
                    cv.fillStyle = '#000'
                } else {
                    cv.fillStyle = '#ccc'
                }
                cv.arc(x, y, 2, 0, Math.PI * 2, false)
                cv.closePath();
                cv.fill()

            }
        }

4.开始画时针

function dHour(hour, minu) {	//因为时针会随着分针的走动而走动，所以设置两个参数
            cv.save();
            cv.beginPath();
            var rad = 2 * Math.PI / 12 * hour;	//时针每小时走的角度
            var rad2 = 2 * Math.PI / 12 / 60 * minu;
            cv.lineWidth = 8;
            cv.lineCap = 'round'
            cv.rotate(rad + rad2)	//时针走的角度
            cv.moveTo(0, 10)
            cv.lineTo(0, -115)
            cv.stroke();
            cv.restore();
        }

5.画分针

function dMinu(minu) {	
            cv.save();
            cv.beginPath();
            var rad = 2 * Math.PI / 60 * minu;
            cv.lineWidth = 5;
            cv.lineCap = 'round'
            cv.rotate(rad)
            cv.moveTo(0, 10)
            cv.lineTo(0, -160)
            cv.stroke();
            cv.restore();
        }

6.画秒针，秒针的画法和分针基本上一样

function dSecd(secd) {
            cv.save();
            cv.beginPath();
            var rad = 2 * Math.PI / 60 * secd;
            cv.lineWidth = 3;
            cv.lineCap = 'round'
            cv.strokeStyle = "#f00";
            cv.rotate(rad)
            cv.moveTo(0, 10)
            cv.lineTo(0, -200)
            cv.stroke();
            cv.restore();
        }

7.在圆心画一个圆点，用来装饰

function center() {
            cv.beginPath()
            cv.arc(0, 0, 5, 0, 2 * Math.PI, false)
            cv.fillStyle = "gray"
            cv.fill()
        }

8.让指针转动

function time() {
            var d = new Date();
            var h = d.getHours();
            var m = d.getMinutes();
            var s = d.getSeconds();
            // var cr = Math.floor(Math.random() * 256)
            // var cg = Math.floor(Math.random() * 256)
            // var cb = Math.floor(Math.random() * 256)
            // document.querySelector('body').style.background = "rgb(" + cr + ',' + cg + ',' + cb + ')';	//网页背景每秒随机改变，可以不要
            cv.clearRect(-250, -250, 500, 500);	//每次都清除一下画布，不然每次指针转动都会留下轨迹
            yuan()
            num()
            dHour(h, m)
            dMinu(m)
            dSecd(s)
            center()//将前面函数全部调用
        }
        time()
        setInterval(time, 1000);设置定时器，每秒调用一次

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>clock</title>
</head>

<body>
    <style>
        .cvs {
            display: block;
            margin: auto;
        }
    </style>
    <canvas class="cvs" width="500px" height="500px"></canvas>


    <script>
        var c = document.getElementsByClassName('cvs')[0]
        var cv = c.getContext('2d')
        cv.translate(250, 250)

        function yuan() {
            cv.lineWidth = 10;
            cv.beginPath()
            cv.arc(0, 0, 245, 0, 2 * Math.PI, false)
            cv.closePath()
            cv.stroke()
        }

        function num() {
            var nums = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
            for (i = 0; i < nums.length; i++) {
                var rad = 2 * Math.PI / 12 * i;
                var x = Math.cos(rad) * 215;
                var y = Math.sin(rad) * 215;
                cv.font = "20px Georgia";
                cv.textBaseline = 'middle';
                cv.textAlign = "center";
                cv.fillText(nums[i], x, y);
            }
            for (i = 0; i < 60; i++) {
                var rad = 2 * Math.PI / 60 * i;
                var x = Math.cos(rad) * 230;
                var y = Math.sin(rad) * 230;
                cv.beginPath();
                if (i % 5 == 0) {
                    cv.fillStyle = '#000'
                } else {
                    cv.fillStyle = '#ccc'
                }
                cv.arc(x, y, 2, 0, Math.PI * 2, false)
                cv.closePath();
                cv.fill()

            }
        }

        // 时针
        function dHour(hour, minu) {
            cv.save();
            cv.beginPath();
            var rad = 2 * Math.PI / 12 * hour;
            var rad2 = 2 * Math.PI / 12 / 60 * minu;
            cv.lineWidth = 8;
            cv.lineCap = 'round'
            cv.rotate(rad + rad2)
            cv.moveTo(0, 10)
            cv.lineTo(0, -115)
            cv.stroke();
            cv.restore();
        }
        // 分针
        function dMinu(minu) {
            cv.save();
            cv.beginPath();
            var rad = 2 * Math.PI / 60 * minu;
            cv.lineWidth = 5;
            cv.lineCap = 'round'
            cv.rotate(rad)
            cv.moveTo(0, 10)
            cv.lineTo(0, -160)
            cv.stroke();
            cv.restore();
        }
        // 秒针
        function dSecd(secd) {
            cv.save();
            cv.beginPath();
            var rad = 2 * Math.PI / 60 * secd;
            cv.lineWidth = 3;
            cv.lineCap = 'round'
            cv.strokeStyle = "#f00";
            cv.rotate(rad)
            cv.moveTo(0, 10)
            cv.lineTo(0, -200)
            cv.stroke();
            cv.restore();
        }
        // 圆心
        function center() {
            cv.beginPath()
            cv.arc(0, 0, 5, 0, 2 * Math.PI, false)
            cv.fillStyle = "gray"
            cv.fill()
        }

        function time() {
            var d = new Date();
            var h = d.getHours();
            var m = d.getMinutes();
            var s = d.getSeconds();
            // var cr = Math.floor(Math.random() * 256)
            // var cg = Math.floor(Math.random() * 256)
            // var cb = Math.floor(Math.random() * 256)
            // document.querySelector('body').style.background = "rgb(" + cr + ',' + cg + ',' + cb + ')';
            cv.clearRect(-250, -250, 500, 500);
            yuan()
            num()
            dHour(h, m)
            dMinu(m)
            dSecd(s)
            center()
        }
        time()
        setInterval(time, 1000);
    </script>
</body>

</html>

相比太极图，时针难度的确是加大了不少。大家也可以继续在时钟的基础上加上更多的东西，让这个时钟变得更加美观。
希望大家在阅读完之后，有更简单的绘制方法，请在评论区留言，谢谢。

本文地址：https://blog.csdn.net/yf19990720/article/details/107367846