{"code":"<div>\n        <canvas id=\"clock\" height=\"600px\" width=\"600px\"></canvas>\n    </div><style>div {\n  text-align: center;\n}\n#clock {\n  border: 1px solid #cccccc;\n}</style><script>var dom = document.getElementById('clock');\nvar ctx = dom.getContext('2d');\nvar width = ctx.canvas.width;\nvar height = ctx.canvas.height;\nvar r = width / 2;\nvar rem = width/200;\nfunction drawBackground() {\n    ctx.save(); //存储当前环境变量；\n    ctx.translate(r, r); //重置坐标到r，r\n    ctx.beginPath(); // 起始一条路径\n    ctx.lineWidth = 10*rem; //设置线宽10；\n    ctx.arc(0, 0, r - ctx.lineWidth /2, 0, 2 * Math.PI, false);\n    ctx.stroke();\n    var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; //定义数组\n    ctx.font = 18*rem+\"px Arial\";\n    ctx.textAlign = \"center\";\n    ctx.textBaseline = \"middle\";\n       hourNumbers.forEach(function(number, i) {\n        var rad = 2 * Math.PI / 12 * i;\n        var x = Math.cos(rad) * (r - 30*rem);\n        var y = Math.sin(rad) * (r - 30*rem);\n        ctx.fillText(number, x, y);\n    });\n    for (var i = 0; i < 60; i++) {\n        var rad = 2 * Math.PI / 60 * i;\n        var x = Math.cos(rad) * (r - 18*rem);\n        var y = Math.sin(rad) * (r - 18*rem);\n        ctx.beginPath();\n        if (i % 5 === 0) {\n            ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);\n            ctx.fillStyle = \"#000\";\n        } else {\n            ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);\n            ctx.fillStyle = \"#ccc\";\n        }\n        ctx.fill();\n    }\n}\nfunction drawHour(hour, minute) {\n  ctx.save();\n  ctx.beginPath();\n  var rad = 2 * Math.PI / 12 * hour;\n  var mrad = 2 * Math.PI / 12 / 60 * minute;\n  ctx.rotate(rad + mrad);\n  ctx.lineWidth = 6*rem;\n  ctx.lineCap = \"round\";\n  ctx.moveTo(0, 10*rem);\n  ctx.lineTo(0, -r / 2);\n  ctx.stroke();\n  ctx.restore();\n}\nfunction drawMinute(minute) {\n  ctx.save();\n  ctx.beginPath();\n  var rad = 2 * Math.PI / 60 * minute;\n  ctx.rotate(rad);\n  ctx.lineWidth = 3*rem;\n  ctx.lineCap = \"round\";\n  ctx.moveTo(0, 10*rem);\n  ctx.lineTo(0, -r + 30*rem);\n  ctx.stroke();\n  ctx.restore();\n}\nfunction drawSecond(second) {\n  ctx.save();\n  ctx.beginPath();\n  ctx.fillStyle = 'red';\n  var rad = 2 * Math.PI / 60 * second;\n  ctx.rotate(rad);\n  ctx.moveTo(-2*rem, 20*rem);\n  ctx.lineTo(2*rem, 20*rem);\n  ctx.lineTo(1, -r + 16*rem);\n  ctx.lineTo(-1, -r + 16*rem);\n  ctx.fill();\n  ctx.restore();\n}\nfunction drawDot() {\n  ctx.beginPath();\n  ctx.fillStyle = '#fff';\n  ctx.arc(0, 0, 3*rem, 0, 2 * Math.PI, false);\n  ctx.fill();\n}\nfunction draw01() {\n  ctx.clearRect(0, 0, width, height);\n  var now = new Date();\n  var hour = now.getHours();\n  var minute = now.getMinutes();\n  var second = now.getSeconds();\n  drawBackground();\n  drawHour(hour, minute);\n  drawMinute(minute);\n  drawSecond(second);\n  drawDot();\n  ctx.restore();\n}\ndraw01();\nsetInterval(draw01, 1000);</script>\n"}