final renderings1. Define variables
Define the radius, define the thickness of the ring, define the center position of the circle, and define the 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; 2. Draw the first arc ctx.beginPath();ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI)
Pay attention to the beginPath() method, the first step in generating a path. Essentially, a path is composed of many sub-paths, which are all in a list, and all sub-paths (lines, arcs, etc.) form a shape. Every time this method is called, the list is cleared and reset, and then we can redraw a new graph.
In other words, 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 connectionctx.quadraticCurveTo((x - innerRadius) - thickness / 2, y - thickness, x - innerRadius, y)
The connection is drawn using a quadratic Bezier curve. The quadraticCurveTo(cp1x, cp1y, x, y) method of Canvas accepts 4 parameters. The first and second parameters are the control points, and the third and fourth parameters are the ends. Click on the official document
Just figure out the control points and end points to draw an arc
4. Draw the second arcctx.arc(x, y, innerRadius, Math.PI, Math.PI * 1.5, true)
Pay attention to the last parameter after the method. Set it to true, which means drawing counterclockwise (the default is clockwise)
5. Draw the second connectionctx.quadraticCurveTo(y - thickness, (x - innerRadius) - thickness / 2, x, y - innerRadius - thickness)
This step is actually not much different from the third step. We simply changed the parameter positions.
6. Fillingctx.fill();
At this point, a simple unclosed ring is completed
Draw a second progress bar ring
7. Initializationctx.beginPath();ctx.fillStyle = #e87c7c;
beginPath means drawing a new graphic. If this method is not called, the graphic drawn later will be connected to the graphic drawn previously.
8. Draw the second progress bar ringctx.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 the drawing method is exactly the same as the first circle, there is no need to repeat it. The difference is only the arc of the circle.
9. Rotate Canvastransform: rotate(-135deg);
Since CSS rotation is more convenient and saves the calculation of angle, I use CSS transform to rotate. Of course, Canvas also provides rotation methods
Complete code
<!DOCTYPE html><html lang=cn><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>canvas</title> <style> .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; } </style></head><body> <div class=ring> <canvas id=tutorial width=150 height= 150></canvas> <span class=fraction>100 <span class=small>Points</span> </span> <span class=title>Service Points</span> </div> <script> 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(); </script></body></html>The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.