[{"data":1,"prerenderedAt":37},["ShallowReactive",2],{"page:tool-canvas-slug:de:full-clock":3},{"order":4,"postTopCategoryName":5,"publishDate":6,"dateChanged":7,"author":8,"ratings":4,"ratingAmount":4,"ratingAverage":4,"ratingOwn":4,"files":13,"videos":20,"documents":21,"postTexts":22,"questions":30,"script":31,"markUp":32,"style":33,"distance":4,"effectiveStatus":34,"effectiveAudience":4,"listed":35,"uuid":36},0,"canvas","0001-01-01T00:00:00","2023-05-29T12:53:10.9514072",{"name":9,"surname":10,"nickName":11,"fullName":12},"Schaffer","Alexander","the boss","Schaffer Alexander",[14],{"imgUrl":15,"blobImgUrlBig":15,"blobImgUrlSharing":16,"blobImgUrlMedium":17,"blobImgUrlSmall":18,"blobImgUrlMicro":19},"https:\u002F\u002Fmedia.mahevi.solutions\u002Fimage\u002F6efeceabc624455e85f48703dfed0d11-big.webp","https:\u002F\u002Fmedia.mahevi.solutions\u002Fimage\u002F6efeceabc624455e85f48703dfed0d11-sharing.jpeg","https:\u002F\u002Fmedia.mahevi.solutions\u002Fimage\u002F6efeceabc624455e85f48703dfed0d11-medium.webp","https:\u002F\u002Fmedia.mahevi.solutions\u002Fimage\u002F6efeceabc624455e85f48703dfed0d11-small.webp","https:\u002F\u002Fmedia.mahevi.solutions\u002Fimage\u002F6efeceabc624455e85f48703dfed0d11-micro.webp",[],[],[23],{"locale":24,"header":25,"subHeader":26,"contentShort":27,"content":25,"contentShortHTML":28,"contentHTML":28,"slug":29},"de","Full Clock","einfache Uhr","Canvas, JS Uhr mit Stunde, Minute, Sekunde und Hundertstelanzeige","","full-clock",[],"\u003Cscript>\n  var clockDisplay = 12;\n  var daySplit = \"am\";\n  var chours = 12;\n  var cminutes = 60;\n  var cseconds = 60;\n  var chundreds = 100;\n\n  var cstyles = \"basic\";\n\n  var canvas = document.getElementById('clockcanvas');\n  var context = canvas.getContext('2d');\n\n  var x = canvas.width \u002F 2;\n  var y = canvas.height \u002F 2;\n  var circ = Math.PI * 2;\n  var quart = Math.PI \u002F 2;\n\n  var cstart = -quart;\n  var cproportion = 1;\n  chours = chours \u002F cproportion;\n  cminutes = cminutes \u002F cproportion;\n  cseconds = cseconds \u002F cproportion;\n  chundreds = chundreds \u002F cproportion;\n  var textAlign = \"center\";\n  var primaryColour = \"#0b4f6c\";\n  var secondaryColour = \"transparent\";\n  var hourColour = \"#0b4f6c\";\n  var minuteColour = \"#232323\";\n  var secondColour = \"#232323\";\n  var hundredColour = \"red\";\n\n  var radiushour = canvas.width \u002F 3;\n  var hsegDist = 100;\n  var hWidth = 6;\n  var hradDist = 4;\n\n  var radiusminute = canvas.width \u002F 3 - hWidth - 2;\n  var msegDist = 100;\n  var mWidth = 6;\n  var mradDist = 4;\n\n  var radiussecond = canvas.width \u002F 3 - hWidth - mWidth - 2;\n  var ssegDist = 100;\n  var sWidth = 2;\n  var sradDist = 4;\n\n  var radiushundred = canvas.width \u002F 3 - hWidth - mWidth - sWidth - 2;\n  var husegDist = 1000;\n  var huWidth = 2;\n  var huradDist = 1;\n\n  function set(hour, minute, second, hundred) {\n\n      context.clearRect(0, 0, canvas.width, canvas.height);\n\n      context.lineWidth = 2;\n      context.strokeStyle = primaryColour;\n\n      context.textAlign = textAlign;\n      context.textBaseline = \"middle\";\n      context.font = \"38px Nunito\";\n      if (minute \u003C 10) { minute = \"0\" + minute; }\n      context.fillText(hour + \":\" + minute, x, y + 3);\n\n      context.textAlign = textAlign;\n      context.textBaseline = \"middle\";\n      context.font = \"22px Nunito\";\n      context.fillText(second, x, y + 40);\n\n      context.textAlign = textAlign;\n      context.textBaseline = \"middle\";\n      context.font = \"20px Nunito\";\n      context.fillText(daySplit, x, y - 35);\n\n      setCircle(chours, hour, radiushour, hWidth, hradDist, hsegDist, true, hourColour);\n\n      setCircle(cminutes, minute, radiusminute, mWidth, mradDist, msegDist, true, minuteColour);\n\n      setCircle(cseconds, second, radiussecond, sWidth, sradDist, ssegDist, true, secondColour);\n\n      setCircle(chundreds, hundred, radiushundred, huWidth, huradDist, husegDist, false, hundredColour);\n  }\n\n  function setCircle(segments, segment, radius, lineWidth, radDist, segDist, cumul, colour) {\n\n      var circleseg = segments;\n\n      for (i = 0; i \u003C circleseg * cproportion; i++) {\n          if (segment > i && cumul) {\n              context.lineWidth = lineWidth;\n              context.strokeStyle = colour;\n          }\n          else if (segment == i && !cumul) {\n              context.lineWidth = lineWidth;\n              context.strokeStyle = colour;\n          }\n          else {\n              context.lineWidth = lineWidth;\n              context.strokeStyle = \"transparent\";\n          };\n\n          context.beginPath();\n          var outerstart = cstart + circ \u002F circleseg * i;\n          var outerend = outerstart + circ \u002F circleseg - (circ \u002F (segDist \u002F cproportion));\n          context.arc(x, y, radius + radDist, outerstart, outerend, false);\n          context.stroke();\n      };\n  };\n\n  var l = setInterval(function () {\n      var hour = new Date().getHours();\n      if (hour > clockDisplay) {\n          hour = hour - clockDisplay;\n          daySplit = \"pm\";\n      } else {\n          daySplit = \"am\";\n      };\n      var minute = new Date().getMinutes();\n      var second = new Date().getSeconds();\n      var millisecond = new Date().getMilliseconds();\n      set(hour, minute, second, Math.round(millisecond \u002F 10));\n  }, 10);\n\n\u003C\u002Fscript>","\u003Cdiv class=\"vertical-center\">\n    \u003Ccanvas id=\"clockcanvas\" width=\"250\" height=\"250\" class=\"center\">\u003C\u002Fcanvas>\n\u003C\u002Fdiv>","\u003Cstyle>\n  .vertical-center {\n      margin: 0;\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      -ms-transform: translate(-50%, -50%);\n      transform: translate(-50%, -50%);\n  }\n  .center {\n  \tmargin: auto;\n  }\n\u003C\u002Fstyle>",1,true,"abc4ff5c-5cbb-4151-a8f0-5872661adf53",1792007798436]