使用Javascript实现钟表

使用h5的方式来实现钟表

<canvas id="demo" width="400" height="400"></canvas>

   < script >
     var cnavas = document.getElementById("demo");
        var ctx = cnavas.getContext("2d");
        var r = 100;//外圆半径
        var r2 = 90;//内圆半径       
        var x = 200, y = 200; //圆心
        function drawClock() {
            ctx.clearRect(0, 0, 400, 400);//清除画布
            ctx.lineWidth = 1 //线条的宽度
            ctx.beginPath();
            ctx.arc(x, y, r, 0, 2 * Math.PI); //绘制外圆
            ctx.stroke(); 
            //绘制刻度
            for (let index = 0; index < 60; index++) {
                ctx.beginPath();
                var deg = index * 6;
                r2 = index % 5 == 0 ? 80 : 90; //5的倍数可点要长一点的处理
                //内圆作为起始点
                var start = { x: x + r2 * Math.cos(deg * Math.PI / 180), y: y + r2 * Math.sin(deg * Math.PI / 180) };
                //外圆作为结束点
                var end = { x: x + r * Math.cos(deg * Math.PI / 180), y: y + r * Math.sin(deg * Math.PI / 180) };
                ctx.moveTo(start.x, start.y);
                ctx.lineTo(end.x, end.y);
                ctx.stroke();
                ctx.closePath();
            }
            var date = new Date();
            var seconde = date.getSeconds();
            var minute = date.getMinutes();
            var hour = date.getHours();
 
            var secDeg = seconde * 6 - 90;//秒钟的角度
            var minuteDeg = minute * 6 - 90;//分钟的角度
            var hourDeg = hour * 30 - 90;//时钟的角度
            //绘制秒针
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x + 70 * Math.cos(secDeg * Math.PI / 180), y + 70 * Math.sin(secDeg * Math.PI / 180));
            ctx.stroke();
 
            //绘制秒针
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineWidth = 3
            ctx.lineTo(x + 60 * Math.cos(minuteDeg * Math.PI / 180), y + 60 * Math.sin(minuteDeg * Math.PI / 180));
            ctx.stroke();
 
            //绘制秒针
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineWidth = 5
            ctx.lineTo(x + 40 * Math.cos(hourDeg * Math.PI / 180), y + 40 * Math.sin(hourDeg * Math.PI / 180));
            ctx.stroke();
 
 
        }
        setInterval(drawClock, 1000);
   < /script >