如何使用画布在另一个内部绘制较小但相同的形状，同时保持恒定的边框厚度？

Question

我想采用任何形状，创建它的较小版本，然后使用负蒙版创建一个新形状，该形状类似于第一个对象的轮廓，但具有“恒定”厚度边框。据我了解，如果不稍微扭曲较小的图像（例如改变其纵横比），这通常是不可能的。因此，如果解决方案对较小的图像造成一些变形，我也没关系。 我也知道如何创建负掩模：

ctx.globalCompositeOperation = 'source-out'

不用担心给我在画布上绘制这些形状的代码。我有代码可以很好地做到这一点。我发现的问题是边框厚度不是恒定的，因为我需要扭曲较小的形状才能使其恒定。目前我还没有扭曲它，也不知道如何扭曲。

我想到的一种方法可能是沿着大图像的外边缘移动，对于每个点，向内绘制一个对应的点一定距离，该点将位于较小图像的边缘上。实际上，当您围绕较大的图像时，会追踪较小的图像。但我不知道如何确定角度是否正确。我必须使用一些曲率半径吗？

无论是某种数学解决方案、算法还是指向我可以使用的库的指针，我都洗耳恭听！

提前致谢。

Answer 1

destination-out

在临时画布中一次剪切一块，然后将它们组合到“主”画布中，这是最后的一个小代码

var s = 10 // thickness scale

var img = new Image;
img.onload = draw;
img.src = "https://i.imgur.com/eKKoWVT.png"

var canvas = document.getElementById('c')
var t_canvas = document.createElement('canvas');
t_canvas.width = canvas.width
t_canvas.height = canvas.height

var ctx = canvas.getContext('2d')
var t_ctx = t_canvas.getContext('2d')

function draw() {
  for (i = 0; i < 8; i += Math.PI / 64) {
    t_ctx.globalCompositeOperation = "source-over";
    t_ctx.drawImage(img, 0, 0, 400, 400);
    t_ctx.globalCompositeOperation = "destination-out";
    t_ctx.drawImage(img, Math.sin(i) * s, Math.cos(i) * s, 400, 400);
    ctx.drawImage(t_canvas, 0, 0, 400, 400);
  }
}

<canvas id="c" width=400 height=400></canvas>