如何在canvas中绘制内部圆弧，就像浏览器在html中绘制一样，例如对于div？

Question

我想在画布上画一个矩形，其边框具有不同的宽度和圆角。该图在浏览器中看起来应该与具有相同参数的 div 完全相同。

我不清楚内弧应该采用什么算法（屏幕截图中以蓝色标记）。是用贝塞尔曲线画的吗？如果是的话，请告诉我它的参数。

如果有人可以提供代码链接，例如 chrome 或 mozilla 浏览器的代码链接，您可以在其中准确地看到此类弧线是如何绘制的，我将不胜感激。

可以在此处查看浏览器中的示例：https://codepen.io/koliane/pen/jOdEWQQ

<div class="rect"></div>

我尝试为贝塞尔曲线选择各种参数，但总是存在小错误。 IE。算法本身并没有发挥作用。同样，我尝试用椭圆画一条曲线，但这也和html版本有很大不同。

我通过将 html div 覆盖在 canvas 元素上来检查结果。

Answer 1

直接引用规格：

padding边缘（内边框）半径是外边框半径减去对应的边框厚度。如果结果为负值，则内半径为零。

因此，在我们的例子中，右上角四分之一椭圆的 x 轴半径应该是

220px

值减去

border-radius

中的

10px

，y 轴半径应该是

 border-right-width

。要在画布上绘制它，我们可以使用方便的

220px - 150px

 方法，它接受与 

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 }