{"code":"\n<script src=\"https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js\">\n</script>\n      <style>\n        .clocks {\n          height: 500px;\n          margin: 25px auto;\n          position: relative;\n          width: 500px;\n        }\n      </style>\n        <div class=\"clocks\">\n            <canvas id=\"canvas\" width=\"500\" height=\"500\"></canvas>\n        </div>\n\n<script>\n// inner variables\nvar canvas, ctx;\nvar clockRadius = 250;\nvar clockImage;\n\n// draw functions :\nfunction clear() { // clear canvas function\n    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);\n}\n\nfunction drawScene() { // main drawScene function\n    clear(); // clear canvas\n\n    // get current time\n    var date = new Date();\n    var hours = date.getHours();\n    var minutes = date.getMinutes();\n    var seconds = date.getSeconds();\n    hours = hours > 12 ? hours - 12 : hours;\n    var hour = hours + minutes / 60;\n    var minute = minutes + seconds / 60;\n\n    // save current context\n    ctx.save();\n\n    // draw clock image (as background)\n    ctx.drawImage(clockImage, 0, 0, 500, 500);\n\n    ctx.translate(canvas.width / 2, canvas.height / 2);\n    ctx.beginPath();\n\n    // draw numbers\n    ctx.font = '36px Arial';\n    ctx.fillStyle = '#000';\n    ctx.textAlign = 'center';\n    ctx.textBaseline = 'middle';\n    for (var n = 1; n <= 12; n++) {\n        var theta = (n - 3) * (Math.PI * 2) / 12;\n        var x = clockRadius * 0.7 * Math.cos(theta);\n        var y = clockRadius * 0.7 * Math.sin(theta);\n        ctx.fillText(n, x, y);\n    }\n\n    // draw hour\n    ctx.save();\n    var theta = (hour - 3) * 2 * Math.PI / 12;\n    ctx.rotate(theta);\n    ctx.beginPath();\n    ctx.moveTo(-15, -5);\n    ctx.lineTo(-15, 5);\n    ctx.lineTo(clockRadius * 0.5, 1);\n    ctx.lineTo(clockRadius * 0.5, -1);\n    ctx.fill();\n    ctx.restore();\n\n    // draw minute\n    ctx.save();\n    var theta = (minute - 15) * 2 * Math.PI / 60;\n    ctx.rotate(theta);\n    ctx.beginPath();\n    ctx.moveTo(-15, -4);\n    ctx.lineTo(-15, 4);\n    ctx.lineTo(clockRadius * 0.8, 1);\n    ctx.lineTo(clockRadius * 0.8, -1);\n    ctx.fill();\n    ctx.restore();\n\n    // draw second\n    ctx.save();\n    var theta = (seconds - 15) * 2 * Math.PI / 60;\n    ctx.rotate(theta);\n    ctx.beginPath();\n    ctx.moveTo(-15, -3);\n    ctx.lineTo(-15, 3);\n    ctx.lineTo(clockRadius * 0.9, 1);\n    ctx.lineTo(clockRadius * 0.9, -1);\n    ctx.fillStyle = '#0f0';\n    ctx.fill();\n    ctx.restore();\n\n    ctx.restore();\n}\n\n// initialization\n$(function(){\n    canvas = document.getElementById('canvas');\n    ctx = canvas.getContext('2d');\n\n    // var width = canvas.width;\n    // var height = canvas.height;\n\nclockImage = new Image();\nclockImage.src = 'https://static.runoob.com/images/mix/125855_nnla_89964.png';\n\n    setInterval(drawScene, 1000); // loop drawScene\n});\n</script>"}