如何在圆圈内画笔划？

Question

有没有一种简单的方法可以在圆圈内绘制笔划（无需绘制 2 个圆圈和类似的解决方法）？如果我这样做：

context.beginPath();
context.arc(200, 200, 93, Math.PI / 2, Math.PI, true);
context.fillStyle = '#FF6A6A';
context.fill();
context.lineWidth = 20;
context.strokeStyle = '#FF0000';
context.stroke();

我明白了：

笔划部分画在图外（用绿色圆圈标记），而我需要它在图内。

Answer 1

您应该更改半径以补偿线宽：

context.beginPath();
context.arc(200, 200, 93, Math.PI / 2, Math.PI, true);
context.fillStyle = '#FF6A6A';
context.fill();
context.lineWidth = 20;
context.strokeStyle = '#FF0000';
context.beginPath();

// the radius of 93 - half the line width
context.arc(200, 200, 93-10, Math.PI / 2, Math.PI, true);

context.stroke();

JS斌：http://jsbin.com/qamuwumiri/edit?html,js,output

如何在圆圈内画笔划？

How to draw stroke inside a circle?

javascript

html5-canvas