Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to use Canvas to realize circular progress bar in html5". In the operation process of actual cases, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

1. Definition of variables

Define radius, define ring thickness, define center position, define default fill color:

let radius = 75let thickness= 10let innerRadius = radius - thicknesslet x = 75let y = 75var canvas = document.getElementById('tutorial');var ctx = canvas.getContext('2d');ctx.fillStyle = "#f2d7d7";

Second, draw the first arc

ctx.beginPath();ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI)

Note that the method initiPath () is the first step in generating a path. Essentially, a path is composed of many subpaths, all of which are in a list, and all of the subpaths (lines, arcs, etc.) constitute the graph. Each time this method is called, the list is cleared and reset, and we can redraw the new graph.

That is, this method can be used to group Canvas images and draw new graphics. If this method is not called, the new graphics will be connected to the previous graphics.

3. Draw the first joint

ctx.quadraticCurveTo((x - innerRadius) - thickness / 2, y - thickness, x - innerRadius, y)

The connection is drawn using quadratic Bezier curves. The quadraticCurveTo(cp1x, cp1y, x, y) method of Canvas accepts 4 parameters. The first and second parameters are control points, and the third and fourth parameters are end points. Official documentation

Just calculate the control point and the end point to draw an arc

4. Draw the second arc

ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true)

Note that the last parameter after the method, set to true, represents counterclockwise drawing (default is clockwise)

5. Draw the second joint

ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)

This step is actually not much different from the third step, simply changing the position of the parameters

VI. Filling

ctx.fill();

At this point, a simple unclosed loop is complete.

Draw the second progress bar ring

VII. Initialization

ctx.beginPath();ctx.fillStyle = "#e87c7c";

BegPath means to draw a new figure. If this method is not called, the figure drawn later will be connected with the figure drawn earlier.

VIII. Draw the second progress bar ring

ctx.beginPath();ctx.fillStyle = "#e87c7c";ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2)ctx.quadraticCurveTo((x + innerRadius) + thickness / 2, y + thickness, x + innerRadius, y)ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true)ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)ctx.fill();

Since it is drawn exactly the same way as the first ring, it is not repeated. The only difference is the arc of the circle.

IX. Rotating Canvas

transform: rotate(-135deg);

Because css rotation is more convenient, but also save the calculation of the angle, so I use the css transform to rotate. And of course Canvas also provides a way to rotate.

complete code canvas .ring { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; flex-direction: column; position: relative; } #tutorial { transform: rotate(-135deg); width: 150px; height: 150px; } .fraction { position: absolute; font-size: 30px; font-weight: bold; color: red; } .small { font-size: 12px; font-weight: lighter; } .title { color: red; bottom: 0; position: absolute; } 100 points service score let radius = 75 let thickness = 10 let innerRadius = radius - thickness let x = 75 let y = 75 var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d'); ctx.fillStyle = "#f2d7d7"; ctx.beginPath(); ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI) ctx.quadraticCurveTo((x - innerRadius) - thickness/2 , y - thickness, x - innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true) ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness) ctx.fill(); ctx.beginPath(); ctx.fillStyle = "#e87c7c"; ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2) ctx.quadraticCurveTo((x + innerRadius) + thickness / 2, y + thickness, x + innerRadius, y) ctx.arc(x, y, innerRadius, Math.PI * 2, Math.PI * 1.5, true) ctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness) ctx.fill(); "html5 how to use Canvas to achieve circular progress bar" content introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.