mahevi.solutions

Art Clock

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>

Suchergebnisse

Art Clock

Art Clock

Kommentare

can you just make numbers around