canvas 简易时钟

今天我们来写一个非常简单的canvas时钟

canvas大家应该都很熟悉是像素图，svg是矢量图
话不多说，写代码
这是最终效果图

 <canvas width="500px" height="500px"></canvas>
    <div id="father">
        <!-- 小时 -->
        <span id="one"></span>
        <!-- 分钟 -->
        <span id="two"></span>
        <!-- 秒 -->
        <span id="three"></span>
    </div>

这里我是把表的实时时间分为三部分写的，大家也可以用一个写，只要用字符串拼接就行

        var canvas = document.getElementsByTagName('canvas')[0];
        var one = document.getElementById("one")
        var two = document.getElementById("two")
        var three = document.getElementById("three")
        // 获取画板的渲染上下文
        var ctx = canvas.getContext('2d');
        // console.log(shi);
        // console.log(fen);
        // console.log(miao);
        var aa, bb, cc

这里我们是使用时间戳来获取当前时间

var timer = setInterval(function () {
            var now = new Date()
            var shi = now.getHours()
            var fen = now.getMinutes()
            var miao = now.getSeconds()
            one.innerHTML = shi + ":"
            two.innerHTML = fen + ":"
            three.innerHTML = miao
            aa = (shi / 2) * 2
            bb = (fen / 60) * 2
            cc = (miao / 60) * 2

            //表盘 
            ctx.clearRect(0, 0, 600, 600);
            ctx.save()
            ctx.beginPath()
            ctx.arc(250, 250, 200, 0, Math.PI * 2, 1);
            ctx.stroke();
            ctx.restore();
            ctx.save()
            ctx.beginPath()
            ctx.arc(250, 250, 5, 0, Math.PI * 2, 1);
            ctx.stroke();
            ctx.restore();
            //时针
            ctx.save()
            ctx.beginPath()
            ctx.translate(250, 250)
            ctx.rotate(Math.PI * aa);
            ctx.moveTo(0, 0)
            ctx.lineTo(0, -100)
            ctx.stroke();
            ctx.restore();
            //分针
            ctx.save()
            ctx.beginPath()
            ctx.translate(250, 250)
            ctx.rotate(Math.PI * bb);
            ctx.moveTo(0, 0)
            ctx.lineTo(0, -125)
            ctx.stroke();
            ctx.restore();
            //秒针
            // aa = aa + 0.1
            ctx.save()
            ctx.beginPath()
            ctx.translate(250, 250)
            ctx.rotate(Math.PI * cc);
            ctx.moveTo(0, 0)
            ctx.lineTo(0, -150)
            ctx.stroke();
            ctx.restore();
        }, 30)

然后这就是简单的画圆，然后需要什么样式大家自己调整就好

真的很简单，一个简单的canvas，加上时间戳就行