HTML5 -Leinwand erkennt die runde Fortschrittsleiste und zeigt das Beispiel für digitale Prozentsatzeffekte an

In diesem Artikel wird die HTML5 -Leinwand eingeführt, um eine kreisförmige Fortschrittsleiste zu erzielen und das Beispiel für digitale prozentuale Effekt anzuzeigen.

Effekt erzielen

1. Erstellen Sie zuerst den HTML -Code

 <Canvas ID = Canvas Breite = 500 Höhe = 500 Style = Hintergrund:#000;> </canvas>

2. Erstellen Sie die Canvas -Umgebung

 var canvas = document.getElementById ('canvas'), // Get Canvas -Element context = canvas.getContext ('2d'), // Die Zeichnungsumgebung erhalten, geben Punkt X -Achse Koordinatenzentrum = Canvas.Height/2, // Canvas Center Punkt y -Achsenkoordinaten rad = math.pi*2/100, // 360 Grad in 100 Kopien teilen, dann ist jeder der Radgrad RAD -Grad Geschwindigkeit = 0,1; / / laden Sie das schnelle und langsame, verlassen Sie sich einfach darauf

3. Zeichnen Sie 5 Pixelbreite Sport -Außenkreise

 // 绘制 5 像素宽的运动外圈 Funktion BlueCircle (n) {context.save (); ) // Der Pfad startet kontext. Winkel, im Uhrzeigersinn/gegen den Uhrzeigersinn) Kontext.Stroke ();

4. Zeichnen Sie den weißen äußeren Ring

 // Die weiße Außenkreis -Funktion whitecircle () {context.save (); , falsch);

5. Prozent Textzeichnung

 Funktionstext (n) {context.save (); // Setzen Sie die Schriftgröße und die Schriftart // Zeichnen Sie die Schriftart und den angegebenen Positionskontext Zeichnungen.Restore ();}

6. Lass es trainieren

 // Der Animationszyklus (Funktion DrawFrame () {window.requestanimationFrame (DrawsFrame); context.clearRect (0, 0, canvas.width, canvas.height); Whitecircle (); te XT (Geschwindigkeit); BlueCircle (Geschwindigkeit); If (if (Geschwindigkeit> 100) Geschwindigkeit = 0; Geschwindigkeit+= 0,1;} ());

Vollständiger Code

 <! {Text-Align: Mitte; script> window.onload = function () {var canvas = document.getElementById ('canvas'), // Canvas -Element context = canvas.getContext ('2D'), / / ​​/ / / / / GET DIE BILD -Umgebung, geben Sie an. 2D CenterX = canvas.width/2, // Canvas Center Point X -Achse Cendry = canvas.height/2, // Canvas Center Punkt y -axis rad = math.pi*2/100, // 360 Grad dividieren In 100 für Teile ist jeder Teil radioniert = 0,1; Strokestyle = #fff; 2, -math.pi/ 2 +n*rad, falsch); // Zeichnungskontext.CLOSEPATH (); Linewidth = 2; .REST.RESTORE (); Zeichnungsstil des Zeichenstils.Font = 40px. 10); ());} </script> </body> </html>

Das oben genannte ist der Inhalt dieses Artikels.