直接引用规格：
填充边（内边界）半径是外边界半径减去相应的边界厚度。如果这导致负值，则内半径为零。
因此在我们的例子中，这给出了我们右上角四分之一椭圆的x轴半径应该是220px从border-radius值减去10px从border-right-width值，y轴半径应该是220px - 150px。
要在canvas中绘制它，我们可以使用方便的roundRect()方法，它接受与border-radius相同的参数，因此允许我们控制圆角矩形的每个角的每个轴。

const ctx = document.querySelector("canvas").getContext("2d");
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.roundRect(0, 150, 602, 202, [0, {x: 210, y: 70}, 0, 0])
ctx.fill();

.rect {
  width: 600px;
  height: 200px;
  background-color: red;
  border-style: solid;
  border-top-width: 150px;
  border-top-color: orange;
  border-right-width: 10px;
  border-right-color: green;
  border-top-right-radius: 220px;
  position: absolute; top: 30px;
}
canvas { position: absolute; top: 30px; }
canvas:hover { opacity: 0.5 }

<div class="rect"></div>
<canvas width=800 height=600></canvas>
Move your mouse over to lower the canvas opacity

如果你只想画那个特定的角，那么使用ctx.ellipse()方法，使用我们上面计算的相同半径：

const ctx = document.querySelector("canvas").getContext("2d");
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.lineWidth = 2;
const radX = 210;
const radY = 70;
ctx.ellipse(602 - radX, 150 + radY, radX, radY, 0, -Math.PI / 2, 0);
ctx.stroke();

.rect {
  width: 600px;
  height: 200px;
  background-color: red;
  border-style: solid;
  border-top-width: 150px;
  border-top-color: orange;
  border-right-width: 10px;
  border-right-color: green;
  border-top-right-radius: 220px;
  position: absolute; top: 30px;
}
canvas { position: absolute; top: 30px; }
canvas:hover { opacity: 0.5 }

<div class="rect"></div>
<canvas width=800 height=600></canvas>
Move your mouse over to lower the canvas opacity