Cet article présente le canevas HTML5 pour obtenir une barre de progression circulaire et afficher l'exemple à effet numérique pour le pourcentage.
Réaliser un effet
1. Créez d'abord du code HTML
<Canvas ID = Canvas Width = 500 Height = 500 Style = Background: # 000;> </ Canvas>
2. Créer un environnement de toile
var canvas = document.getElementById ('Canvas'), // Get Canvas Element context = canvas.getContext ('2D'), // Obtenez l'environnement de dessin, indiquez comme 2D CenterX = Canvas.Width / 2, // Canva Center Point X-axis Centre de coordonnées = Canvas.Height / 2, // Point central de toile y -axe coordonnées rad = math.pi * 2/100, // diviser 360 degrés en 100 exemplaires, puis chacun est le degré rad Vitesse = 0,1; / / charger le rapide et lent, comptez simplement sur lui3. Dessiner des cercles extérieurs de sports de largeur de largeur de 5 pixels
// 绘制 5 像素宽的运动外圈 Fonction BlueCircle (n) {context.save (); ); Angle, dans le sens horaire / dans le sens antihoraire) contextuel.stroke ();4. Dessinez l'anneau extérieur blanc
// dessine la fonction du cercle extérieur blanc () {context.save (); , false);5. Pourcentage de texto
Texte de fonction (n) {context.save (); // Définissez la taille de la police et la police // dessine la police, et la position spécifiée Context.strokeText (n.tofixed (0) +%, CenterX-25, Center + 10); dessins.restore ();}6. Laissez faire de l'exercice
// Le cycle d'animation (fonction Draw -Frame () {Window.RequestanimationFrame (DrawFrame); context.ClearRect (0, 0, Canvas.Width, Canvas.Height); WhiteCircle (); te xt (Speed); BlueCircle (Speed); If (if (Speed> 100) Speed = 0; Speed + = 0,1;} ());Code complet
<! {Text-Align: Center; Background-Color: # 000;} </ Style> </ Head> <Body> <Canvas Id = Canvas Width = 500 Height = 500 Style = Background: # 000;> </ Canvas> < script> window.onload = function () {var canvas = document.getElementById ('canvas'), // get canvas element context = canvas.getContex 2d CenterX = Canvas.Width / 2, // Canvas Center Point X -axis Cendry = Canvas.Height / 2, // Canvas Center Point Y -axis Rad = Math.pi * 2/100, // Diviser 360 degrés en 100 pour les portions, chaque partie est la vitesse rad = 0,1; strokestyle = #fff; 2, -math.pi / 2 + n * rad, false); // dessiner du contexte.closepath (); linewidth = 2; .Rest.Restore (); Style de dessin du style de dessin.font = 40px .; 10); ());} </cript> </ body> </html>Ce qui précède est tout le contenu de cet article.