使用h5的方式来实现钟表

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

  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