html 5画布几何半径尺寸？

Question

外半径不遵循内半径。我目前正在使用x = width / 4 + radius + outset，y = height / 4 + radius + outset。我认为一开始需要与斜边有一定的比例。

 ctx.arc( width/4 + radius + outset , height/4 + radius + outset , radius, 0, Math.PI/2 );

Answer 1

注释中给出的另一种方法是使用lineWidth描边弧，而不是计算两个圆角矩形，然后填充它。

实施例

var ctx = document.querySelector("canvas").getContext("2d"),
    radius = 50,
    width = 20;

ctx.lineWidth = width;
ctx.moveTo(0, 20);
ctx.arc(100, 20 + radius, radius, -Math.PI * 0.5, 0);  // upper right corner
ctx.arc(100, 40 + radius, radius, 0, Math.PI * 0.5);   // bottom right corner
// etc...
ctx.strokeStyle = "#EA4885";
ctx.stroke();

<canvas></canvas>