{"id":7968,"date":"2021-12-18T21:54:26","date_gmt":"2021-12-18T19:54:26","guid":{"rendered":"https:\/\/www.main-vision.com\/richard\/blog\/?p=7968"},"modified":"2021-12-18T21:54:28","modified_gmt":"2021-12-18T19:54:28","slug":"an-svg-clock","status":"publish","type":"post","link":"https:\/\/www.main-vision.com\/richard\/blog\/an-svg-clock\/","title":{"rendered":"An SVG 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<p class=\"wp-block-paragraph\">Sometimes we experiment and play with technology. The clock below is an SVG clock using SVG and Canvas technology to display local time. Doing it with these two technologies was easier than with JavaScript. The code doesn&#8217;t require calculating thousandths of a second like another clock I tried. The tutorial to make this clock is here: <a href=\"https:\/\/www.w3schools.com\/graphics\/canvas_clock.asp\" data-type=\"URL\" data-id=\"https:\/\/www.w3schools.com\/graphics\/canvas_clock.asp\">W3 Canvas Clock<\/a>. <\/p>\n\n\n\n<!-- 01. Background -->\n<canvas id=\"canvas\" width=\"400\" height=\"400\" style=\"background-color:#333\"><\/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\n\n\n<p class=\"wp-block-paragraph\">My errors when writing the code were to miss out a zero, hence missing out the central circle, and then adding + instead of * for minutes and seconds, so that the minute and second hands were wrong. When I spotted the typos I corrected them. Now it works. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I have 45 minutes of course left before I finish <a href=\"https:\/\/www.udemy.com\/course\/learn-front-end-development\/\" data-type=\"URL\" data-id=\"https:\/\/www.udemy.com\/course\/learn-front-end-development\/\">this course: Front End Web Development Ultimate Course 2021<\/a>. Some parts could have been shortened. I find that it is a good course to take you through some of the parts that other courses skip on. I like that it takes time to explore bootstrap in full, jquery, SVG to some degree, and canvas. It showed me tools I either struggled to understand, or others that I didn't know existed. It allowed me to fill in gaps in knowledge that should  make follow-up courses more interesting.  <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tomorrow I have to experiment with the game that is included in the course. When I finish this course, I can move on with the next. <\/p>\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>Sometimes we experiment and play with technology. The clock below is an SVG clock using SVG and Canvas technology to display local time. Doing it with these two technologies was easier than with JavaScript. The code doesn&#8217;t require calculating thousandths of a second like another clock I tried. The tutorial to make this clock is [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7915,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":3,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[9],"tags":[4677,1094,4676,4130],"class_list":["post-7968","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech-related","tag-canvas","tag-learning","tag-svg","tag-web-development"],"jetpack_publicize_connections":[],"_links":{"self":[{"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/posts\/7968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/types\/post"}],"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=7968"}],"version-history":[{"count":1,"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/posts\/7968\/revisions"}],"predecessor-version":[{"id":7970,"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/posts\/7968\/revisions\/7970"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/media\/7915"}],"wp:attachment":[{"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/media?parent=7968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/categories?post=7968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.main-vision.com\/richard\/blog\/wp-json\/wp\/v2\/tags?post=7968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}