JS implementiert kreisförmiges Ziehen und Schieben des Fortschrittsbalkens

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

Artikel empfehlen

Lösung für das Problem, dass Docker CMD/ENTRYPOINT das sh-Skript ausführt: nicht gefunden/run.sh:

Es gibt kein Problem mit der Dockerfile-Konfigura...

Anweisungen zur Verwendung des HTML-Tags dl dt dd

Grundaufbau: Code kopieren Der Code lautet wie fol...

Javascript, um den Effekt des Schließens von Anzeigen zu erzielen

Hier ist eine Fallstudie zu Ihrer Information, wi...

Das Bildelement img hat in IE6 zusätzlichen Leerraum

Beim Erstellen eines DIV+CSS-Layouts einer Seite ...

Vollständige Schritte zum Bereitstellen von JAR-Paketprojekten mithilfe von Shell-Skripten unter Linux

1. JDK installieren Überprüfen Sie die Betriebsda...

Lösungsbeispiel und Erklärung für Fehler beim Importieren und Exportieren von Daten in MySQL-Datenbanken

Daten exportieren Einen Fehler melden VARIABLEN W...

Führen Sie die Schritte aus, um schnell ein Vue3.0-Projekt zu erstellen

Inhaltsverzeichnis 1. Wir müssen sicherstellen, d...

Die Magie des tbody-Tags beschleunigt die Anzeige von Tabelleninhalten

Sie haben sicher schon einmal die Webseiten andere...

5 Gründe, warum sich Responsive Webdesign nicht lohnt

Dieser Artikel stammt aus Tom Ewers Managewp-Blog ...

Wann ist die Verwendung von dl, dt und dd sinnvoll?

dl: Definitionsliste Definitionsliste dt: Definiti...

Tutorial zur Installation und Konfiguration der Dekomprimierungsversion von mysql8.0.0 winx64.zip

Dieser Artikel zeichnet das Installations-Tutoria...

Hauptfunktionen von MySQL Innodb: Einfügepuffer

Inhaltsverzeichnis Was ist ein Einfügepuffer? Was...

Wie implementiert MySQL ACID-Transaktionen?

Vorwort Kürzlich wurde ich in einem Interview gef...

So verwenden Sie SVG-Symbole in WeChat-Applets

SVG wurde in den letzten Jahren aufgrund seiner v...

Detaillierte Analyse von or, in, union und Indexoptimierung in MySQL

Dieser Artikel entstand aus der Hausaufgabe „Erle...