Beispielcode für die Canvas-Ring-Countdown-Komponente

Autor：Eve Cole Aktualisierungszeit：2025-01-24 00:12:01

In diesem Artikel wird der Beispielcode der Canvas-Ring-Countdown-Komponente vorgestellt und mit allen geteilt. Die Details lauten wie folgt:

Der Effekt ist wie in Abbildung 1 dargestellt:

Countdown-Komponente für den Canvas-Ring

Der Canvas-Ring-Countdown ist ein auf Canvas implementierter Countdown und wird für die Verwendung auf mobilen Geräten empfohlen.

Download-Adresse für den Canvas-Ring-Countdown

1. Anwendung

1. HTML-Code

Das ID-Attribut kann beliebig benannt werden

 <canvas id=canvas></canvas>

2. Führen Sie die Datei „process.js“ ein

Seitenangabe

 <script src=js/process.js></script>

3. Initialisierungsparameter

Einfach instanziieren

 <script> window.onload = function () { let ctd = new Countdown(); ctd.init(); </script>

2. Beschreibung der Einstellungsparameter

Die folgenden Parameter sind nicht erforderlich und können je nach Bedarf konfiguriert werden.

 window.onload = function () { let ctd = new Countdown(); ctd.init({ id: canvas, // ID, Canvas muss ID-Attributgröße haben: 130, // Die maximale Größe zum Zeichnen eines Kreises, width = High borderWidth: 4, // Randbreite borderColor: #fff, // Randfarbe OuterColor: #fff, // Farbschema für den äußersten unteren Kreis: #fff, // Farbe der Fortschrittsbalkenanimation, Schriftart: #fff, // Farbe des Schriftrings: #ffc720, // Farbe des Fortschrittsbalkenrings, innerColor: #4e84e5, // Hintergrundfarbe des innersten Kreises, Schriftartgröße: 50, Zeit: 5 });

3. Beispielcode

html

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Title</title> <style> body { background: #c2c1ce } .container { position: absolute left: 50 %; oben: transformieren (-50 %, -50 %); center; } </style></head><body><div class=container> <canvas class=canvas id=canvas></canvas></div><script src=js/process.js></script ><script> window.onload = function () { let ctd = new Countdown(); ctd.init(); </script></body></html>

 /** * Erstellt von Tan Xi am 15.03.2018. */function Countdown() { // Legen Sie die Standardparameter fest this.settings = { id: canvas, // ID, Canvas muss ID-Attributgröße haben: 130, // Die maximale Größe zum Zeichnen eines Kreises, Breite = Höhe borderWidth: 4, // Rahmenbreite borderColor: #fff, // Rahmenfarbe äußereFarbe: #fff, // Farbplanfarbe für den äußersten unteren Kreis: #fff, // Farbe der Fortschrittsbalkenanimation, Schriftartfarbe: #fff, // Schriftfarbe ringColor: #ffc720, // Farbe des Fortschrittsbalkenrings, innerColor: #4e84e5, // Hintergrundfarbe des innersten Kreises, Schriftartgröße: 50, Zeit: 5 }}Countdown.prototype.init = function (opt) { this.obj = document.getElementById(this.settings.id); this.obj.width = this.settings.size; this.obj.height = this.settings.size; this.settings, opt); this.countdown();};//Zeichne die Hintergrundfarbe Countdown.prototype.drawBackground = function () { this.drawCircle(0, 360, 0, this.settings.outerColor);};// Fortschrittsbalken-Animationshintergrund zeichnen Countdown.prototype.drawProcess = function () { this.drawCircle(0, 360, 4, this.settings.ringColor);};/ / Countdown zeichnen Countdown.prototype.drawInner = function () { this.drawCircle(0, 360, 23, this.settings.innerColor); this.strokeBorder(this.settings.borderWidth);};// Fortschrittsbalkenanimation zeichnen Countdown.prototype.drawAnimate = function () { // Rotationswinkel let deg = Math.PI / 180; v = Zeitplan * 360, startAng = -90, endAng = -90 + v; this.ctx.moveTo(this.settings.size / 2, this.settings.size / 2); this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 -3, startAng * deg, endAng * deg, false); this.ctx.fillStyle = this.settings.scheduleColor(); this.ctx.closePath();};// Zeichne den Rand Countdown.prototype.StrokeBorder = function (borderWidth) { this.ctx.lineWidth = borderWidth; this.ctx.StrokeStyle = this.settings.borderColor; Stroke ();};// Text zeichnen Countdown.prototype.StrokeText = function (text) { this.ctx.textAlign = center; this.ctx.textBaseline = middle; this.ctx.font = this.settings.fontSize+px+ microsoft yahei; this.settings.fontColor; 2, this.settings.size / 2);};// Zeichne einen Kreis Countdown.prototype.drawCircle = function (startAng, endAng, border, fillColor) { let deg = Math.PI / 180; this.ctx.beginPath(); this.ctx.arc(this.settings.size / 2, this.settings.size / 2 -border, startAng * deg, endAng * deg, false); this.ctx.fillStyle = fillColor(); this.ctx.closePath();};//Fortschrittsbalkenanimation Countdown.prototype.countdown = function () { let oldTime = +new Date(); timer = setInterval(() => { let allMs = this.settings. time * 1000,// Zum Beispiel 30*1000=30 000ms currentTime = +new Date( //); Schrittgröße = (aktuelle Zeit – vergangene Zeit) / Gesamtzahl der Sekunden Schedule = (currentTime – oldTime) / allMs; this.drawBackground(); this.drawAnimate(); this.drawInner(); clearInterval(timer); } }, 100);};// Alle zeichnen Countdown.prototype.drawAll = function (schedule) { Schedule = Schedule >= 1 ? 1 : Schedule = ParseInt(This.settings.time * (1 - Zeitplan)) + 1; // Leinwand löschen this.ctx.clearRect(0, 0, this.settings.size, this.settings.size); this.drawBackground(); this.drawAnimate(); this.StrokeText(text);};//Object copy function extension(obj1,obj2){ for(let attr in obj2){ obj1[attr] = obj2[attr] }}

4. Vorbereitungsarbeiten für die zusätzliche Leinwand

Tatsächlich ist Canvas nicht so mysteriös, es ist nichts weiter als ein H5-Tag, genau wie andere HTML-Tags:

 <canvas id=canvas></canvas>

Beachten Sie, dass es am besten ist, die Breite und Höhe der Leinwand zu Beginn festzulegen (wenn Sie die Breite und Höhe nicht festlegen, stellt der Browser die Leinwandgröße standardmäßig auf 300 Pixel Breite und 100 Pixel Höhe ein), was jedoch nicht möglich ist Wird mit CSS festgelegt (die Erweiterung wird gezogen). Es wird empfohlen, direkt in das Canvas-Tag zu schreiben:

 <canvas id=canvas width=130 height=130></canvas>

Canvas selbst verfügt über keine Zeichenfunktionen und alle Zeichenarbeiten werden über js implementiert. Normalerweise verwenden wir getElementById in js, um die Leinwand abzurufen, auf der gearbeitet werden soll (das bedeutet, dass wir eine ID für die Leinwand festlegen müssen):

 var c = document.getElementById(canvas);var ctx = c.getContext(2d);

1. Nachdem Sie den Pinsel vorbereitet haben, können Sie mit dem Zeichnen beginnen. Die Mittelpunktkoordinaten sind (Größe/2, Größe/2). Zeichnen Sie zunächst den größten weißen Hintergrundkreis mit einem Radius von Größe/2 .

 let deg = Math.PI / 180; // beginPath() kann den Pfadzeichnungseffekt isolieren und verhindern, dass vorherige Effekte kontaminiert werden. ctx.beginPath();// tcx.arc(circle center deg, 360 * deg, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();

2. Beginnen Sie mit dem Zeichnen des zweiten gelben unteren Kreises. Der Mittelpunkt des Kreises ist ebenfalls (Größe/2, Größe/2), aber der Radius ist 4 Pixel kleiner als der des weißen unteren Kreises, sodass der Radius des gelben unteren Kreises (Größe) beträgt /2-4)

 let deg = Math.PI / 180; // beginPath() kann den Pfadzeichnungseffekt isolieren und verhindern, dass vorherige Effekte kontaminiert werden. ctx.beginPath();//tcx.arc(circle center 0* deg, 360 * deg, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();

3. Beginnen Sie mit dem Zeichnen eines blauen Innenkreises, wobei der Mittelpunkt des Kreises (Größe/2, Größe/2) und der Radius (Größe-23) beträgt, und fügen Sie dann einen 4 Pixel großen weißen Rand hinzu.

 let deg = Math.PI / 180; // beginPath() kann den Pfadzeichnungseffekt isolieren und verhindern, dass vorherige Effekte kontaminiert werden. ctx.beginPath();// tcx.arc(circle center 0* deg, 360 * deg, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();// Weißer Rand ctx.lineWidth = 4;ctx.StrokeStyle = #fff;ctx.Stroke();

4. Zeichnen Sie Text und zentrieren Sie ihn vertikal

 ctx.textAlign = center;ctx.textBaseline = middle;ctx.fillStyle = #fff;// ctx.fillText (Text, X-Koordinate relativ zur Leinwand, Y-Koordinate relativ zur Leinwand) ctx.fillText(30, Größe / 2 , Größe / 2);

5. Wie erstelle ich eine Animation? Tatsächlich ist es auch ein Prozess, bei dem der gelbe Fortschrittsbalken langsam abgedeckt wird. Zu diesem Zeitpunkt wird der blaue Kreis durch den weißen animierten Kreis abgedeckt , der letzte blaue Kreis wird gezeichnet.

 let deg = Math.PI / 180;ctx.beginPath();// tcx.arc(Kreismittelpunkt X, Kreismittelpunkt Y, Radius, Startwinkel, Endwinkel, im und gegen den Uhrzeigersinn);ctx.arc(size / 2, size / 2, size / 2-4, 0* deg, 360 * deg, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();

6. Als nächstes müssen wir die Animation mit den Zahlen verknüpfen. Indem wir die aktuellste Zeit verwenden und dann die Gesamtzeit dividieren, können wir einen Schlüsselprozentsatz ermitteln Änderung der Zahlen und des Winkels, in dem der weiße animierte Kreis gezeichnet wird.

 Countdown.prototype.countdown = function () { let oldTime = +new Date(); // Vergangene Zeit: 1522136419291 timer = setInterval(() => { let currentTime = +new Date(); // Aktuelle Zeit: 1522136419393 let allMs = this.settings.time * 1000;// Gesamtzeit in Sekunden: wie 30*1000=30 000ms scheme = (currentTime - oldTime) / allMs;// Zeichnungsprozentsatz: (1522136419393-1522136419291)/30000=0,0204 this.schedule = scheme; this.drawAll(schedule); if (currentTime - oldTime >= allMs) { // this.drawBackground(); this.drawInner(); this.drawInner(0); // Alle zeichnen Countdown .prototype.drawAll = Funktion (Zeitplan) { Zeitplan = Zeitplan >= 1 ? 1 : Zeitplan = parseInt(this.settings.time * (1 - Zeitplan) + 1; // Die Leinwand löschen this.ctx.clearRect(0, 0, this.settings.size, this.drawBackground(); this.drawAnimate(); ( ); this.drawInner(); this.StrokeText(text);};// Fortschrittsbalkenanimation zeichnen Countdown.prototype.drawAnimate = function () { // Drehwinkel let deg = Math.PI / 180; let v = scheme * 360, startAng = -90,//Start angle endAng = -90 + v;//End angle this.ctx.beginPath(); this.ctx.moveTo(this.settings .size / 2, this.settings.size / 2); this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 - 3, startAng * deg, endAng * deg, false); this.ctx.fillStyle = this.ctx.fill();} ;

Prozessorientierte Version

 /** * Fortschrittsbalkenanimation*/ countdown: function () { this.getSystemInfo().then(v => { // Adaptive let width = v.windowWidth, size = width >= 414 ? 66 : 400 / 414 * 66; size = parseInt(size); size = size % 2 ? size + 1 : size; = setInterval(() => { let time = maxtime * 1000, currentTime = +new Date, scheme = (currentTime - sTime) / time; this.drew(schedule, maxtime, size); if (currentTime - sTime >= time ) { // Text zeichnen this.setData({ scheme: 0 } }, /** *); draw*/drawed: function (schedule, val, size) { size = size || 66; const _ts = this; = size / 2, deg = Math.PI / 180; _ts.setData({ width: size, height: size, scheme: text + 1 }); Leeren Sie die Leinwand ctx.clearRect(0, 0, size, size); // Zeichnen Sie einen weißen Hintergrund ctx.arc(r, r, r, 0 * deg, 360 * deg); = ' rgba(255,255,255,1)'; Orange zeichnen ctx.beginPath(); ctx.arc(r, r, r - 2, 0 * deg, 360 * deg; ctx.fill(); // Einen weißen Fortschrittsbalken zeichnen let v = scheme * 360; ctx.moveTo(r, r); ctx.arc(r, r, r, -90 * deg, (-90 + v) * deg; ctx.fillStyle = 'rgba(255,255,255,1)'; (); ctx.fill(); // Mitte blauer Boden ctx.beginPath(); r - 12, 0 * deg, 360 * deg); ctx.fillStyle = 'rgba(90,140,220,1)'; Einheitliche Zeichnung ctx.draw();

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.