This article introduces HTML5 Canvas to achieve a circular progress bar and display the digital percentage effect example. The specifics are as follows:
Achieve effect
1. First create HTML code
<canvas id = canvas width = 500 height = 500 style = background:#000;> </canvas>
2. Create Canvas environment
var canvas = document.GetelementByid ('Canvas'), // Get Canvas element Context = Canvas.GetContext ('2D'), // Get the drawing environment, indicate as 2d CenterX = Canvas.width/2, // Canva center point X -axis coordinate center = Canvas.height/2, // Canvas center point y -axis coordinates RAD = math.pi*2/100, // divide 360 degrees into 100 copies, then each one is the RAD degree Speed = 0.1;/ /Load the fast and slow, just rely on it3. Draw 5 pixel width sports outer circles
//绘制5像素宽的运动外圈function blueCircle(n){ context.save(); context.strokeStyle = #fff; //设置描边样式context.lineWidth = 5; //设置线宽context.beginPath( ); // The path starts context.arc (centerx, center, 100, -math.pi/2, -math.pi/2 +n*rad, false); // , Y coordinate, radius, starting angle, terminate angle, clockwise/counterclockwise) context.stroke (); // Draw context.closepath (); // The path end context.rest.restore ();}4. Draw the white outer ring
// Draw the white outer circle function whitecircle () {context.save (); context.beginpath (); context.lineWidth = 2; // Set the wire width. Terx, Center, 100, 0, math.pi*2, false); context.stroke (); context.closepath (); context.rest.restore ();}5. Percent text drawing
Function text (n) {context.save (); // Save and RESTORE can guarantee that the style attribute is only used in the Canvas element context.strokestyle = #fff; // Set the drawing style Context.font = 40px Arial; // Set the font size and font // Draw the font, and the specified position Context.Stroketext (n.tofixed (0)+%, centerx-25, center+10); context.stroke (); // execute the drawings.restore () ;}6. Let it exercise
// The animation cycle (function drawframe () {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;} ());Complete code
<! Doctype html> <html Lang = EN> <Head> <meta Charset = UTF-8> <Title> HTML5 Canvas Round Proposal Strip and Display Digital Percentage </Title>*{Margin: 0; Padding: 0;} Body {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.GetContext ('2D'), / / /Get the picture environment, indicate to 2d CenterX = Canvas.width/2, // Canvas Center Point X -axis Cendry = Canvas.Height/2, // Canvas Center Point Y -axis Rad = Math.pi*2/100, // Divide 360 degrees into 100 For portions, every portion is the speed of RAD degree = 0.1; // The fast and slow down loading rely on it // Draw a 5 -pixel -wide sports outer circle Function BlueCircle (n) {context.save (); context.Strokestyle = #fff ; // Set the drawing style context.lineWidth = 5; // Set the wire width context.beginpath (); // The path begins to start.arc (centerx, center, 100, -math.pi/2, -math.pi/ 2 +n*rad, false); // used to draw arc context.arc (x coordinates, y coordinates, radius, starting angle, termination angle, clockwise/counterclockwise) context.stroke (); // Draw drawing Context.closepath (); // The path end context.rest.restore ();} // Draw the white outer circle function whiteCircle () {context.save (); context.beginpath (); context.lineWidth = 2 ; // Set the line Wide Context.Strokesty = red; context.arc (center, center, 100, 0, math.pi*2, false); context.stroke (); context.closepath (); context.rest.restore (); Score Text drawing text (n) {context.save (); // Save and RESTORE can ensure that the style attribute is only used in the Canvas element context.strokestyle = #fff; // Set the drawing style of the drawing style.font = 40px. ;; // Set the font size and font // Draw the font, and the specified position context.stroketext (n.tofixed (0)+%, centerx-25, center+10); context.stroke (); ();} // animation cycle (); Text (SPEED); BlueCircle (Speed ); iF (SPEED> 100) Speed = 0; Speed += 0.1;} ());} </script> </body> </html>The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.