如何在圆圈内画出笔画？

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 Bin：http://jsbin.com/qamuwumiri/edit?html,js,output