[{"data":1,"prerenderedAt":36},["ShallowReactive",2],{"page:tool-canvas-id:de:47":3},{"id":4,"order":5,"published":6,"dateInserted":7,"publishDate":7,"dateChanged":8,"author":9,"ratings":5,"ratingAmount":5,"ratingAverage":5,"ratingOwn":5,"files":15,"videos":22,"documents":23,"postTexts":24,"script":33,"markUp":34,"style":35,"distance":5},47,0,true,"0001-01-01T00:00:00","2023-05-29T12:53:10.9514072",{"id":10,"name":11,"surname":12,"nickName":13,"fullName":14},1,"Schaffer","Alexander","the boss","Schaffer Alexander",[16],{"blobImgUrlBig":17,"blobImgUrlSharing":18,"blobImgUrlMedium":19,"blobImgUrlSmall":20,"blobImgUrlMicro":21},"https:\u002F\u002Fmaheviblobs.blob.core.windows.net\u002Fimage\u002Ffullclock-6efeceab-c624-455e-85f4-8703dfed0d11-big.webp?sv=2024-11-04&se=2026-09-18T09%3A36%3A58Z&sr=b&sp=r&sig=ei%2BD96P8vVhW%2BFr3tgu%2BxdK4xW0n1nYSy1Gdv69%2BicI%3D","https:\u002F\u002Fmaheviblobsunsec.blob.core.windows.net\u002Fimage\u002Ffullclock-6efeceab-c624-455e-85f4-8703dfed0d11-sharing.jpeg?sv=2024-11-04&se=2026-09-18T09%3A36%3A58Z&sr=b&sp=r&sig=VmLXxALRR4maQmydVowo%2B%2Bn4%2Fpz7dbXP2o4v%2FRQletM%3D","https:\u002F\u002Fmaheviblobs.blob.core.windows.net\u002Fimage\u002Ffullclock-6efeceab-c624-455e-85f4-8703dfed0d11-medium.webp?sv=2024-11-04&se=2026-09-18T09%3A36%3A58Z&sr=b&sp=r&sig=cbLKWnYUEQn23ai0qLEUQEs%2F9h5P7TuNsJpsCSbBC1w%3D","https:\u002F\u002Fmaheviblobs.blob.core.windows.net\u002Fimage\u002Ffullclock-6efeceab-c624-455e-85f4-8703dfed0d11-small.webp?sv=2024-11-04&se=2026-09-18T09%3A36%3A58Z&sr=b&sp=r&sig=nbieq2eb%2FyJyfe457EzMAg6eI8C3uge4cysb8i76wjA%3D","https:\u002F\u002Fmaheviblobs.blob.core.windows.net\u002Fimage\u002Ffullclock-6efeceab-c624-455e-85f4-8703dfed0d11-micro.webp?sv=2024-11-04&se=2026-09-18T09%3A36%3A58Z&sr=b&sp=r&sig=kirocykkqpnPfeDVuS1hJNVG8dtZFDxFKODfvtBTHzo%3D",[],[],[25],{"id":5,"locale":26,"header":27,"subHeader":28,"contentShort":29,"content":27,"contentShortHTML":30,"contentHTML":30,"slug":31,"postId":4,"languageId":32,"automaticTranslation":6},"de","Full Clock","einfache Uhr","Canvas, JS Uhr mit Stunde, Minute, Sekunde und Hundertstelanzeige","","full-clock",2,"\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>",1789637818086]