最近有读者加我微信征询这个问题，如下图所示：
要实现的成果如下：
其实难度不大，然而思考一些人员对于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实现这种货色还是太麻烦，个别不倡议。
关注公众号“ITMan彪叔” 能够及时收到更多有价值的文章。另外如果对可视化感兴趣，能够和我交换，微信541002349.
发表回复