schliessen
Suchergebnisse
Seite
|
Webseite
(+43) 664 2081526
info@mahevi.solutions
Diese Seite verwendet Cookies um Dir ein angenehmes Surfen zu ermöglichen. Indem Du weitersurfst, stimmst Du – jederzeit für die Zukunft widerruflich – dieser Datenverarbeitung zu.
Akzeptieren
Details
Portfolio
Blog
Tools
QR Code Generator
Darlehensrechner
Umschuldungsrechner
Canvas
Login
Art Clock
Home
Canvas List
Art Clock
Alexander
2/22/2021
Canvas
Canvas, JS Uhr mit Stunde, Minute, Sekunde und Hundertstelanzeige
kopieren
<div class="vertical-center"> <canvas id="clockcanvas" width="350" height="350"></canvas> </div> <style> .vertical-center { margin: 0; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } </style> <script> //define clocknumbers var clockDisplay = 12; var daySplit = "am"; var chours = 12; var cminutes = 60; var cseconds = 60; var chundreds = 100; // define Canvas var canvas = document.getElementById('clockcanvas'); var context = canvas.getContext('2d'); // define circle var x = canvas.width / 2; var y = canvas.height / 2; var circ = Math.PI * 2; var quart = Math.PI / 2; //design var cstart = -quart; var cproportion = 1; chours = chours / cproportion; cminutes = cminutes / cproportion; cseconds = cseconds / cproportion; chundreds = chundreds / cproportion; var textAlign = "center"; var primaryColour = "#232323"; var secondaryColour = "#d3d3d3"; var hourColour = "#6d597a"; var minuteColour = "#e56b6f"; var secondColour = "#b56576"; var hundredColour = "#355070"; var fullSegments = false; var cumulsegments = false; // define segments var hsegDist = 100; // distance beteween segments var hWidth = 20; // width of segment var hradDist = 4; // shift circles var msegDist = 100; var mWidth = 20 + 20; var mradDist = 4; var ssegDist = 100; var sWidth = 5; var sradDist = 4; var husegDist = 1000; var huWidth = 2; var huradDist = 1; // customize radius var radiushour = canvas.width / 4 + 15 + 20 - mWidth - 2; var radiusminute = canvas.width / 4 + 15 - 20 - 2; var radiussecond = canvas.width / 4 + 15 + 20 - hWidth - mWidth - 2; var radiushundred = canvas.width / 4 + 15 + 20 - hWidth - mWidth - sWidth - 2; //draw clock function set(hour, minute, second, hundred) { context.clearRect(0, 0, canvas.width, canvas.height); //Line context.lineWidth = 2; context.strokeStyle = primaryColour; //text time context.textAlign = textAlign; context.textBaseline = "middle"; context.font = "35px Nunito"; if (minute < 10) { minute = "0" + minute; } context.fillText(hour + ":" + minute, x, y + 3); //text second context.textAlign = textAlign; context.textBaseline = "middle"; context.font = "20px Nunito"; context.fillText(second, x, y + 40); //text Daysplit context.textAlign = textAlign; context.textBaseline = "middle"; context.font = "20px Nunito"; context.fillText(daySplit, x, y - 35); //hour circle setCircle(chours, hour, radiushour, hWidth, hradDist, hsegDist, cumulsegments, hourColour, fullSegments, circ / 60); //minute circle setCircle(cminutes, minute, radiusminute, mWidth, mradDist, msegDist, cumulsegments, minuteColour, fullSegments, circ / 200); //second circle setCircle(cseconds, second, radiussecond, sWidth, sradDist, ssegDist, cumulsegments, secondColour, fullSegments, circ / 100); //hundreds circle setCircle(chundreds, hundred, radiushundred, huWidth, huradDist, husegDist, cumulsegments, hundredColour, fullSegments, circ / 60); } // draw circles function setCircle(segments, segment, radius, lineWidth, radDist, segDist, cumul, colour, fullSegments, pointerWidth) { var circleseg = segments; // go through whole 360deg for (i = 1; i <= circleseg * cproportion; i++) { if (segment > i && cumul) { context.lineWidth = lineWidth; context.strokeStyle = colour; } else if (segment == i && !cumul) { context.lineWidth = lineWidth; context.strokeStyle = colour; } else { context.lineWidth = lineWidth; context.strokeStyle = secondaryColour; }; // draw segments context.beginPath(); var outerstart = cstart + circ / circleseg * i; var outerend = true; if (fullSegments) { outerend = outerstart + circ / circleseg - (circ / (segDist / cproportion)); } else { outerend = outerstart + pointerWidth } context.arc(x, y, radius + radDist, outerstart, outerend, false); context.stroke(); }; }; // loop time and draw canvas var l = setInterval(function () { var hour = new Date().getHours(); if (hour > clockDisplay) { hour = hour - clockDisplay; daySplit = "pm"; } else { daySplit = "am"; }; var minute = new Date().getMinutes(); var second = new Date().getSeconds(); var millisecond = new Date().getMilliseconds(); // call draw function set(hour, minute, second, Math.round(millisecond / 10)); }, 10); </script>
Link teilen
buy me a coffee
send some bucks
send bitcoin fract
Kommentare
Kommentar hinzufügen
remix
- 24 Nov 2020
can you just make numbers around
Can you add numbers?
antworten
doom
- 22 Feb 2021
you wish
have a look at
Ziffernuhr
Bitcoin
×
Überweisung
×
Kommentare
can you just make numbers around
Can you add numbers?
you wish
have a look at Ziffernuhr