[{"data":1,"prerenderedAt":36},["ShallowReactive",2],{"page:tool-canvas-id:de:46":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},46,0,true,"0001-01-01T00:00:00","2023-05-29T12:51:00.3561721",{"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\u002Fsemiclock-10849219-2440-448a-b6dd-05fda3415ee2-big.webp?sv=2024-11-04&se=2026-09-18T09%3A36%3A57Z&sr=b&sp=r&sig=OAcd1sjnjyU689dfM5H6nq0f%2FHL5S%2BNVonAPN3%2FYfMU%3D","https:\u002F\u002Fmaheviblobsunsec.blob.core.windows.net\u002Fimage\u002Fsemiclock-10849219-2440-448a-b6dd-05fda3415ee2-sharing.jpeg?sv=2024-11-04&se=2026-09-18T09%3A36%3A57Z&sr=b&sp=r&sig=aGxsgdDgbY2bRp9Q4SNIBI7jBtHMlNUa101WwH2KJ%2BM%3D","https:\u002F\u002Fmaheviblobs.blob.core.windows.net\u002Fimage\u002Fsemiclock-10849219-2440-448a-b6dd-05fda3415ee2-medium.webp?sv=2024-11-04&se=2026-09-18T09%3A36%3A57Z&sr=b&sp=r&sig=R6ErihtBOjRiJQ1EdAJ6%2BlpQEcqyXBrf0decVJN8fVM%3D","https:\u002F\u002Fmaheviblobs.blob.core.windows.net\u002Fimage\u002Fsemiclock-10849219-2440-448a-b6dd-05fda3415ee2-small.webp?sv=2024-11-04&se=2026-09-18T09%3A36%3A57Z&sr=b&sp=r&sig=dqUkesU3PnJpPYljh5apbtHMZJxJOdubrvxIP63Esg4%3D","https:\u002F\u002Fmaheviblobs.blob.core.windows.net\u002Fimage\u002Fsemiclock-10849219-2440-448a-b6dd-05fda3415ee2-micro.webp?sv=2024-11-04&se=2026-09-18T09%3A36%3A57Z&sr=b&sp=r&sig=kUyBf72cpcU2QFK6dYgPnK8gBVQmiep50bxSwRJefmY%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","Semi Clock","Halbe Uhr","Canvas, JS-Uhr mit Stunden-, Minuten-, Sekunden- und Hundertstelanzeige","","semi-clock",2,"\u003Cscript>\n\nvar clockDisplay = 12;\nvar daySplit = \"am\";\nvar chours = 12;\nvar cminutes = 60;\nvar cseconds = 60;\nvar chundreds = 100;\n\nvar cstyles = \"basic\";\n\nvar canvas = document.getElementById('clockcanvas');\nvar context = canvas.getContext('2d');\n\nvar x = canvas.width;\nvar y = canvas.height \u002F 2;\nvar circ = Math.PI * 2;\nvar quart = Math.PI \u002F 2;\n\nvar cstart = + quart;\nvar cproportion = 0.5;\nchours = chours \u002F cproportion;\ncminutes = cminutes \u002F cproportion;\ncseconds = cseconds \u002F cproportion;\nchundreds = chundreds \u002F cproportion;\nvar textAlign = \"right\";\nvar primaryColour = \"#0b4f6c\";\nvar secondaryColour = \"transparent\";\nvar hourColour = \"#0b4f6c\";\nvar minuteColour = \"#232323\";\nvar secondColour = \"#232323\";\nvar hundredColour = \"red\";\n\nvar radiushour = canvas.width \u002F 3;\nvar hsegDist = 100;\nvar hWidth = 6;\nvar hradDist = 4;\n\nvar radiusminute = canvas.width \u002F 3 - hWidth - 2;\nvar msegDist = 100;\nvar mWidth = 6;\nvar mradDist = 4;\n\nvar radiussecond = canvas.width \u002F 3 - hWidth - mWidth - 2;\nvar ssegDist = 100;\nvar sWidth = 2;\nvar sradDist = 4;\n\nvar radiushundred = canvas.width \u002F 3 - hWidth - mWidth - sWidth - 2;\nvar husegDist = 1000;\nvar huWidth = 2;\nvar huradDist = 1;\n\nfunction 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 = \"30px 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 = \"24px 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\nfunction 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 = secondaryColour;\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\nvar 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 id=\"canvascontainer\" class=\"vertical-center\">\n    \u003Ccanvas id=\"clockcanvas\" width=\"250\" height=\"250\" class=\"right\">\u003C\u002Fcanvas>\n\u003C\u002Fdiv>","\u003Cstyle>\n.vertical-center {\n  margin: 0;\n  position: absolute;\n  top: 50%;\n  right: 0;\n  -ms-transform: translate(0%, -50%);\n  transform: translate(0%, -50%);\n}\n.right {\n\tfloat: right;\n}\n\u003C\u002Fstyle>",1789637817222]