{"id":7983,"date":"2021-12-22T17:41:29","date_gmt":"2021-12-22T15:41:29","guid":{"rendered":"https:\/\/www.main-vision.com\/richard\/blog\/?page_id=7983"},"modified":"2021-12-22T17:42:43","modified_gmt":"2021-12-22T15:42:43","slug":"clock","status":"publish","type":"page","link":"https:\/\/www.main-vision.com\/richard\/blog\/clock\/","title":{"rendered":"Clock"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> &lt; 1<\/span> <span class=\"rt-label rt-postfix\">minute<\/span><\/span>\n<canvas id=\"canvas\" style=\"background-color:#333\" width=\"800\" height=\"800\"><\/canvas>\n\n<!-- 02. Clock Background -->\n<script type=\"text\/javascript\">\n  var canvas = document.getElementById(\"canvas\");\n  var ctx = canvas.getContext(\"2d\");\n  var radius = canvas.height \/ 2;\n  ctx.translate(radius, radius);\n  radius = radius * 0.90\n  setInterval(drawClock, 1000);\n  drawClock();\n\n  function drawClock(){\n    drawFace(ctx,radius);\n    drawNumbers(ctx, radius);\n    drawTime(ctx, radius);\n    \/\/ drawHand(ctx, pos, length, width)\n  }\n\n  function drawFace(ctx, radius) {\n    var grad;\n    ctx.beginPath();\n    ctx.arc(0, 0, radius, 0 , 2*Math.PI);\n    ctx.fillStyle = \"white\";\n    ctx.fill();\n\n    grad = ctx.createRadialGradient(0, 0 ,radius* 0.95, 0, 0, radius*1.05);\n    grad.addColorStop(0, '#333');\n    grad.addColorStop(0.5, 'white');\n    grad.addColorStop(1, '#333');\n    ctx.strokeStyle = grad;\n    ctx.lineWidth = radius*0.1;\n    ctx.stroke();\n\n    ctx.beginPath();\n    ctx.arc(0, 0, radius * 0.1, 0, 2*Math.PI);\n    ctx.fillStyle = '#333';\n    ctx.fill();\n  }\n  <!-- Draw numbers on clock face -->\n  function drawNumbers (ctx, radius) {\n    var ang;\n    var num;\n    ctx.font = radius*0.15 + \"px arial\";\n    ctx.textBaseline=\"middle\";\n    ctx.textAlign=\"center\";\n    for(num = 1; num < 13; num++){\n      ang = num * Math.PI \/ 6;\n      ctx.rotate(ang);\n      ctx.translate(0, -radius*0.85);\n      ctx.rotate(-ang);\n      ctx.fillText(num.toString(), 0, 0);\n      ctx.rotate(ang);\n      ctx.translate(0, radius*0.85);\n      ctx.rotate(-ang);\n    }\n  }\n\n    function drawTime(ctx, radius){\n     var now = new Date();\n     var hour = now.getHours();\n     var minute = now.getMinutes();\n     var second = now.getSeconds();\n     \/\/ Hour\n     hour = hour%12;\n     hour=(hour*Math.PI\/6)+(minute*Math.PI\/(6*60))+(second*Math.PI\/(360*60));\n     drawHand(ctx, hour, radius*0.5, radius*0.07);\n     \/\/Minute\n     minute = (minute*Math.PI\/30)+(second*Math.PI\/(30*60));\n    drawHand(ctx, minute, radius*0.8, radius*0.07);\n    \/\/Second\n    second=(second*Math.PI\/30);\n    drawHand(ctx, second, radius*0.9, radius*0.02);\n  }\n\n\n  function drawHand(ctx, pos, length, width) {\n    ctx.beginPath();\n    ctx.lineWidth = width;\n    ctx.linecap = \"round\";\n    ctx.moveTo(0,0);\n    ctx.rotate(pos);\n    ctx.lineTo(0, -length);\n    ctx.stroke();\n    ctx.rotate(-pos);\n  }\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> &lt; 1<\/span> <span class=\"rt-label rt-postfix\">minute<\/span><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/full-width.php","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"class_list":["post-7983","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/pages\/7983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/comments?post=7983"}],"version-history":[{"count":2,"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/pages\/7983\/revisions"}],"predecessor-version":[{"id":7987,"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/pages\/7983\/revisions\/7987"}],"wp:attachment":[{"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/media?parent=7983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}