Javascript 使画布（矩形）环绕具有边框半径的矩形

我有一个边界半径的图像，我正试图使画布线环绕它。我想使用canvas，因为我需要能够设置矩形环绕它的距离，因此，例如，如果我将其设置为

1

，则矩形几乎不会是它们的，如果我将其设置为100，则它将完全围绕具有边框半径的矩形。下面是一个我需要的圆的例子：

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
函数换行符（）{
让值=（Math.floor（Math.random（）*100）+1）*0.06283185307179587；
ctx.clearRect（0，0，c.宽度，c.高度）；
ctx.线宽=10；
ctx.strokeStyle='#00FF00'；
ctx.beginPath（）；
ctx.弧（100,75,55,0，值）；
ctx.stroke（）；
}
设置间隔（（）=>{
新行（）
}，100）

img{
宽度：100px；
边界半径：50px；
位置：绝对位置；
左：58px；
顶部：33px；
}

---

我认为这是一个很好的解决方案，非常灵活，基本上没有JS开销

const c=document.getElementById（“myCanvas”）；
const ctx=c.getContext（“2d”）；
设值=0
函数换行符（）{
值+=Math.PI/60
值%=数学PI*2
ctx.clearRect（0，0，c.宽度，c.高度）；
ctx.线宽=10；
ctx.fillStyle='#00FF00'；
ctx.beginPath（）；
//移到中间
ctx.移动到（c.宽度/2，c.高度/2）
//右行
ctx.lineTo（c.宽度，c.高度/2）
//做一个大半圆
ctx.弧（c.宽度/2，c.高度/2，c.宽度，0，值）；
ctx.fill（）；
}
设置间隔（（）=>{
新行（）
}，100）

：根目录{
/**====尝试更改这些变量=====**/
--物体半径：35px；
--物体边界：5px；
--物品大小：100px；
--事物双边界：计算（2*var（--事物边界））；
}
.事情{
宽度：计算值（var（--事物大小）+var（--事物双边框））；
高度：计算值（var（--物体大小）+var（--物体双边框））；
显示：网格；
网格模板区域：“中心”；
网格模板列：100%；
}
.事情>*{
框大小：边框框；
网格区域：中心；
宽度：100%；
}
.thing>img{
边界半径：var（--事物半径）；
边框：var（--事物边框）实心透明；
z指数：1；
}
.东西>画布{
边界半径：var（--事物半径）；
}