最近有读者加我微信咨询这个问题，如下图所示：
要实现的效果如下：
其实难度不大，但是考虑一些人员对于canvas不熟悉，还是简单的介绍下。
其实该图表，就是一个圆圈外面在套一个圆弧的效果， 主要的难点在于不知道怎么绘制圆圈的虚线效果。其实canvas本身已经支持了虚线的绘制，就是一个api调用的事情，api是setLineDash。
示例代码如下：
<!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(200,200,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(200,200,75,0,-Math.PI/2,Math.PI /2 ); ctx.stroke(); ctx.restore(); </script> </body> </html>
绘制效果如下图所示：
ps：后面那个读者也给我看了下css的实现， css实现这种东西还是太麻烦，一般不建
议。
