[{"data":1,"prerenderedAt":37},["ShallowReactive",2],{"page:tool-canvas-slug:de:semi-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:51:00.3561721",{"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\u002F108492192440448ab6dd05fda3415ee2-big.webp","https:\u002F\u002Fmedia.mahevi.solutions\u002Fimage\u002F108492192440448ab6dd05fda3415ee2-sharing.jpeg","https:\u002F\u002Fmedia.mahevi.solutions\u002Fimage\u002F108492192440448ab6dd05fda3415ee2-medium.webp","https:\u002F\u002Fmedia.mahevi.solutions\u002Fimage\u002F108492192440448ab6dd05fda3415ee2-small.webp","https:\u002F\u002Fmedia.mahevi.solutions\u002Fimage\u002F108492192440448ab6dd05fda3415ee2-micro.webp",[],[],[23],{"locale":24,"header":25,"subHeader":26,"contentShort":27,"content":25,"contentShortHTML":28,"contentHTML":28,"slug":29},"de","Semi Clock","Halbe Uhr","Canvas, JS-Uhr mit Stunden-, Minuten-, Sekunden- und Hundertstelanzeige","","semi-clock",[],"\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>",1,true,"f6d33343-aa27-4195-aa14-4f146d5663fe",1792007808952]