JS implementiert kreisförmiges Ziehen und Schieben des Fortschrittsbalkens

In diesem Artikelbeispiel wird der spezifische JS-Code zur Realisierung des Ziehens und Schiebens des kreisförmigen Fortschrittsbalkens zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Effektanzeige

Halbkreisförmiger Fortschrittsbalkeneffekt

Kreisförmiger Fortschrittsbalken

Code-Implementierung

<!doctype html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-kompatibel" content="IE=edge,chrome=1" />
  <title>Ziehen und verschieben Sie den kreisförmigen Fortschrittsbalken</title>
</Kopf>
<Text>
<canvas id="canvasId" width="400" height="400"></canvas>
<Skripttyp="text/javascript">
    var canvas = document.getElementById("canvasId");
    var ctx = canvas.getContext("2d");
    var ox = 200;
    var oy = 200;
    var oder = 180;
    var br = 15;
    var moveFlag = false;

    Funktion Offset (r, d) {//Berechnen Sie die Offset-Koordinaten basierend auf Radiant und Entfernung. Return {x: -Math.sin (r) * d, y: Math.cos (r) * d}.
    };

    Funktion zeichnen(n) {
        ctx.clearRect(0,0,Leinwandbreite,Leinwandhöhe);
        ctx.strokeStyle = "#99a";
        ctx.Linienbreite = 5;
        ctx.beginPath();
        ctx.arc(ox,oy,or,0,Math.PI,true);//Halbkreis// ctx.arc(ox,oy,or,0,2*Math.PI,true);//Vollkreisctx.stroke();
        ctx.strokeStyle = "#69f";
        ctx.Linienbreite = 5;
        ctx.beginPath();
        ctx.arc(ox,oy,or,Math.PI,(n*2+0,5)*Math.PI,false);
        // ctx.arc(ox,oy,or,0.5*Math.PI,(n*2+0.5)*Math.PI,false);
        ctx.stroke();
        ctx.fillStyle = "#69f";
        ctx.font = "80px Arial";
        ctx.textAlign = "zentriert";
        ctx.textBaseline = "Mitte";
        ctx.fillText(Math.round(n*100-25)+"%",ox,oy);
        ctx.fillStyle = "#00f";
        ctx.beginPath();
        var d = Offset (n * 2 * Math.PI, oder);
        ctx.arc(ox+dx,oy+dy,br,0,2*Math.PI,true);
        ctx.fill();
    }

    var on = ("ontouchstart" im Dokument)? {
        Start: „touchstart“, Bewegung: „touchmove“, Ende: „touchend“
    } : {
        Start: "Maustaste gedrückt", Bewegung: "Maustaste bewegt", Ende: "Maustaste hoch"
    };

    Funktion getXY(e,obj) {
        var et = e.touches? e.touches[0] : e;
        var x = et.clientX;
        var y = et.clientY;
        zurückkehren {
            x : x - obj.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft),
            y: y – Objekt.OffsetTop + (Dokument.Body.ScrollTop || Dokument.DocumentElement.ScrollTop)
        }
    }

    canvas.addEventListener(beim Start, Funktion(e) {
        VerschiebeFlag = wahr;
    }, FALSCH);

    canvas.addEventListener(beim Verschieben, Funktion(e) {
        wenn (Flagge verschieben) {
            var k = getXY(e,Leinwand);
            var r = Math.atan2(kx-ox, oy-ky);
            var hd = (Math.PI+r)/(2*Math.PI);

            // Gleitbereich des Halbkreises bestimmen if (hd <= 0.75 && hd >= 0.25) {
                zeichnen(hd);
            }
        }
    }, FALSCH);

    canvas.addEventListener(am Ende, Funktion(e) {
        moveFlag = falsch;
    }, FALSCH);

    zeichnen(0,25);
</Skript>

</body>
</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

JS implementiert das Ziehen des Fortschrittsbalkens, um die Transparenz von Elementen zu ändern
JavaScript implementiert einen verschiebbaren Fortschrittsbalken
JavaScript implementiert den horizontalen Fortschrittsbalken-Drag-Effekt
js, um einen gleitenden Fortschrittsbalkeneffekt zu erzielen

<<: So verwenden Sie eine VLAN-getaggte Ethernet-Karte im CentOS/RHEL-System

>>: HTML-Tabellen-Tag-Tutorial (45): Tabellen-Body-Tag