Recently, some readers added me to ask this question on wechat, as shown in the picture below:

The effect to be achieved is as follows:

In fact, it is not difficult, but considering that some people are not familiar with Canvas, let’s give a brief introduction.

Actually this chart, it is outside a circle to cover the effect of an arc, the main difficulty depends on the dashed line effect that does not know how to draw a circle. In fact, canvas itself already supports drawing dashed lines, which is called by an API called setLineDash.

Example code is as follows:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Line Dash</title> <style> canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="canvas" width="600" height="400"></canvas> <script> var ctx = document.getElementById( 'canvas' ).getContext( '2d' ); var w = canvas.width, h = canvas.height; var x = w / 2, y = h / 2; ctx.save(); ctx.strokeStyle = "gray"; CTX. SetLineDash ((5, 5)); ctx.lineWidth = 10; ctx.beginPath(); CTX. Arc (200200,75,0, Math. PI * 2); ctx.stroke(); ctx.restore(); ctx.save(); ctx.beginPath(); ctx.lineWidth = 12; ctx.lineCap = "round"; ctx.joinCap = "round"; ctx.strokeStyle = "red"; CTX. Arc (200200,75,0 - Math. PI / 2, Math. The PI / 2); ctx.stroke(); ctx.restore(); </script> </body> </html>Copy the code

The drawing effect is as follows:

Ps: the back of the reader also showed me the CSS implementation, CSS implementation of this kind of thing is too troublesome, generally do not recommend.

Follow the public account “ITMan Biao Shu” to receive more valuable articles in time. In addition, if you are interested in visualization, you can communicate with me on wechat 541002349.