Exemple de code pour le composant de compte à rebours de l'anneau de toile

Auteur：Eve Cole Date de mise à jour：2025-01-24 00:12:01

Cet article présente l'exemple de code du composant de compte à rebours de l'anneau de canevas et le partage avec tout le monde. Les détails sont les suivants :

L'effet est comme le montre la figure 1 :

Composant de compte à rebours en anneau de toile

Le compte à rebours Canvas est un compte à rebours implémenté basé sur Canvas et dont l'utilisation est recommandée sur les appareils mobiles.

Adresse de téléchargement du compte à rebours de l'anneau en toile

1. Comment utiliser

1.code HTML

L'attribut ID peut être nommé arbitrairement

 <identifiant du canevas=canvas></canvas>

2. Présentez le fichier process.js

Référence de page

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

3. Paramètres d'initialisation

Instanciez simplement

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

2. Description des paramètres de réglage

Les paramètres suivants ne sont pas obligatoires et peuvent être configurés en fonction de besoins spécifiques.

 window.onload = function () { let ctd = new Countdown(); ctd.init({ id: canvas, // ID, le canevas doit avoir la taille de l'attribut ID : 130, // La taille maximale pour dessiner un cercle, width = High borderWidth : 4, // Largeur de la bordure borderColor : #fff, // Couleur de la bordure externalColor : #fff, // Programme de couleurs du cercle inférieur le plus extérieur : #fff, // Couleur de l'animation de la barre de progression fontColor : #fff, // Couleur de la police ringColor : #ffc720, // Couleur de l'anneau de la barre de progression innerColor : #4e84e5, // Couleur de l'arrière-plan du cercle le plus intérieur fontSize : 50, time : 5 } } ;

3. Exemple de code

HTML

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Titre</title> <style> body { background : #c2c1ce } .container { position : absolu ; 50 % ; haut : 50 % ; transformation : traduire (-50 %, -50 %); largeur : 130 px ; hauteur : 130 px ; 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>

 /** * Créé par Tan Xi le 15/03/2018. */function Countdown() { // Définissez les paramètres par défaut this.settings = { id : canvas, // ID, le canevas doit avoir une taille d'attribut d'ID : 130, // La taille maximale pour dessiner un cercle, width = height borderWidth : 4, // Largeur de la bordure borderColor : #fff, // Couleur de la bordure externalColor : #fff, // Couleur du cercle inférieur le plus extérieur : #fff, // couleur de la police d'animation de la barre de progression : #fff, // couleur de la police ringColor : #ffc720, // couleur de l'anneau de la barre de progression innerColor : #4e84e5, // couleur de l'arrière-plan du cercle le plus intérieur fontSize : 50, temps : 5 }}Countdown.prototype.init = fonction (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();};//Dessiner la couleur d'arrière-plan Countdown.prototype.drawBackground = function () { this.drawCircle(0, 360, 0, this.settings.outerColor);};// Dessiner l'arrière-plan de l'animation de la barre de progression Countdown.prototype.drawProcess = function () { this.drawCircle(0, 360, 4, this.settings.ringColor);};/ / Dessiner le compte à rebours Countdown.prototype.drawInner = function () { this.drawCircle(0, 360, 23, this.settings.innerColor); this.StrokeBorder(this.settings.borderWidth);};// Dessiner l'animation de la barre de progression Countdown.prototype.drawAnimate = function () { // Angle de rotation let deg = Math.PI / 180; v = planning * 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();};//Dessinez la bordure Countdown.prototype.StrokeBorder = function (borderWidth) { this.ctx.lineWidth = borderWidth; this.ctx.StrokeStyle = this.settings.borderColor; Stroke ();};// Dessiner du texte Countdown.prototype.StrokeText = function (text) { this.ctx.textAlign = center; this.ctx.textBaseline = middle; this.ctx.font = this.settings.fontSize+px+ microsoft yahei; this.ctx.fillStyle = this.settings.fontColor; 2, this.settings.size / 2);};// Dessine un cercle 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, this.settings.size / 2 -border, startAng * deg, endAng * deg, false); this.ctx.fillStyle = fillColor this.ctx.fill(); this.ctx.closePath();};//Animation de la barre de progression Countdown.prototype.countdown = function () { let oldTime = +new Date(); timer = setInterval(() => { let allMs = this.settings. time * 1000,// Par exemple, 30*1000=30 000 ms currentTime = +new Date( //); Taille de l'étape = (heure actuelle - heure passée) / nombre total de secondes planning = (currentTime - oldTime) / allMs; this.schedule = planning; this.drawAll(schedule); Redessiner this.drawBackground(); this.drawProcess(); this.drawAnimate(); this.drawInner(); clearInterval(timer); } }, 100);};// Dessiner tout Countdown.prototype.drawAll = function (schedule) { planning = planning >= 1 : planning = parseInt(this.settings.time * (1 - planning)) + 1 ; // Effacer le canevas this.ctx.clearRect(0, 0, this.settings.size, this.settings.size); this.drawBackground(); this.drawProcess(); this.drawAnimate(); this.drawText(text);};//Fonction de copie d'objet extend(obj1,obj2){ for(let attr in obj2){ obj1[attr] = obj2[attr];

4. Travail de préparation supplémentaire de la toile

En fait, canvas n’est pas si mystérieux. Ce n’est rien de plus qu’une balise H5, tout comme les autres balises HTML :

 <identifiant du canevas=canvas></canvas>

Notez qu'il est préférable de définir la largeur et la hauteur du canevas au début (si la largeur et la hauteur ne sont pas définies, le navigateur définira par défaut la taille du canevas sur 300 pixels de large et 100 pixels de haut), et cela ne peut pas être défini en utilisant css (il sera extrait de l'extension), il est recommandé d'écrire directement à l'intérieur de la balise canvas :

 <identifiant du canevas=largeur du canevas=130 hauteur=130></canvas>

Canvas lui-même n'a aucune capacité de dessin et tous les travaux de dessin sont implémentés via js. Habituellement, nous utilisons getElementById dans js pour faire fonctionner le canevas (cela signifie que nous devons définir un identifiant pour le canevas) :

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

1. Après avoir préparé le pinceau, vous pouvez commencer à dessiner. Les anneaux sont en fait des cercles concentriques avec des rayons différents. Les coordonnées centrales sont (taille/2, taille/2). Dessinez d'abord le plus grand cercle inférieur sur fond blanc avec un rayon de taille/2. .

 let deg = Math.PI / 180; //beginPath() peut isoler l'effet de dessin du chemin et empêcher la contamination des effets précédents. ctx.beginPath();// tcx.arc(circle center deg, 360 * deg, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();

2. Commencez à dessiner le deuxième cercle inférieur jaune, le centre du cercle est également (taille/2, taille/2), mais le rayon est 4px plus petit que le cercle inférieur blanc, donc le rayon du cercle inférieur jaune est (taille /2-4)

 let deg = Math.PI / 180; //beginPath() peut isoler l'effet de dessin du chemin et empêcher la contamination des effets précédents. ctx.beginPath();//tcx.arc(circle center 0* deg, 360 * deg, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();

3. Commencez à dessiner un cercle intérieur bleu, avec le centre du cercle étant (taille/2, taille/2) et le rayon étant (taille-23), puis ajoutez-y une bordure blanche de 4 pixels.

 let deg = Math.PI / 180; //beginPath() peut isoler l'effet de dessin du chemin et empêcher la contamination des effets précédents. ctx.beginPath();// tcx.arc(circle center 0* deg, 360 * deg, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();// Bordure blanche ctx.lineWidth = 4;ctx.StrokeStyle = #fff;ctx.Stroke();

4. Dessinez du texte et centrez-le verticalement

 ctx.textAlign = center;ctx.textBaseline = middle;ctx.fillStyle = #fff;// ctx.fillText (texte, coordonnée X par rapport au canevas, coordonnée Y par rapport au canevas) ctx.fillText(30, taille / 2 , taille / 2);

5. Comment créer une animation ? En fait, il s'agit également d'un processus consistant à dessiner un cercle blanc, un processus consistant à recouvrir lentement la barre de progression jaune. Ensuite, dessinez d'abord le cercle blanc. À ce moment-là, le cercle bleu sera recouvert par le cercle blanc animé. , le dernier cercle bleu sera bien dessiné.

 let deg = Math.PI / 180;ctx.beginPath();// tcx.arc(centre du cercle X, centre du cercle Y, rayon, angle de départ, angle de fin, dans le sens horaire et antihoraire);ctx.arc(taille / 2, taille / 2, taille / 2-4, 0* deg, 360 * deg, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();

6. Le processus de peinture relativement simple est terminé. Ensuite, nous devons associer l'animation aux nombres. En utilisant l'heure la plus récente - l'heure la plus ancienne, puis en divisant le temps total, nous pouvons obtenir un pourcentage clé. changement des chiffres et de l'angle auquel le cercle blanc animé est dessiné.

 Countdown.prototype.countdown = function () { let oldTime = +new Date(); // Heure passée : 1522136419291 timer = setInterval(() => { let currentTime = +new Date(); // Heure actuelle : 1522136419393 let allMs = this.settings.time * 1000 ;// Temps total en secondes : tel que 30*1000=30 000 ms planning = (currentTime - oldTime) / allMs ; // Pourcentage de dessin : (1522136419393-1522136419291) / 30000 = 0,0204 this.schedule = planning ; if (currentTime - oldTime >= allMs) { // Redessiner this.drawBackground(); this.drawProcess(); this.drawAnimate(); this.drawText(0); clearInterval(timer); 10);}; .prototype.drawAll = function (schedule) { planning = planning >= 1 ? 1 : planning let text = parseInt(this.settings.time * (1 - planning)) + 1 ; // Effacer le canevas this.ctx.clearRect(0, 0, this.settings.size, this.drawBackground(); ( ); this.drawInner(); this.StrokeText(text);};// Dessiner l'animation de la barre de progression Countdown.prototype.drawAnimate = function () { // Angle de rotation let deg = Math.PI / 180 ; soit v = horaire * 360, startAng = -90,//Angle de début endAng = -90 + v;//Angle de fin this.ctx.beginPath(); .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();} ;

Version orientée processus

 /** * Animation de la barre de progression*/ compte à rebours : function () { this.getSystemInfo().then(v => { // Adaptatif let width = v.windowWidth, size = width >= 414 ? 66 : 400 / 414 * 66 ; taille = parseInt(taille); taille = taille % 2 ? taille + 1 : laissez maxtime = 30, sTime = +nouvelle date, temp = setInterval(() => { let time = maxtime * 1000, currentTime = +new Date, planning = (currentTime - sTime) / time; this.drew(schedule, maxtime, size); if (currentTime - sTime >= time ) { // Dessine le texte this.setData({ planning: 0 }); clearInterval(temp }, 100 }); draw*/ draw: function (schedule, val, size) { size = size || const _ts = this; planning = planning >= 1 : let text = parseInt(val - val * planning), r = taille / 2, deg = Math.PI / 180; _ts.setData({ largeur : taille, hauteur : taille, planning : texte + 1 }); Effacer le canevas ctx.clearRect(0, 0, size, size); // Dessine un fond blanc ctx.beginPath(); ctx.arc(r, r, r, 0 * deg, 360 * deg); = 'rgba(255,255,255,1)'; ctx.closePath(); Dessinez de l'orange ctx.beginPath(); ctx.arc(r, r, r - 2, 0 * deg, 360 * deg ctx.fillStyle = 'rgba(248,200,80,1)'; ctx.fill(); // Dessine une barre de progression blanche let v = planning * 360; ctx.moveTo(r, r); ctx.arc(r, r, r, -90 * deg, (-90 + v) * deg); ctx.fillStyle = 'rgba(255,255,255,1)'; (); ctx.fill(); // Centre bleu en bas ctx.beginPath(); r - 12, 0 * deg, 360 * deg); ctx.fillStyle = 'rgba(90,140,220,1)'; ctx.closePath(); ctx.fill(); Dessin unifié ctx.draw();

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.