Javascript 围绕任何画布形状绘制外边框和内边框

如何围绕任何画布形状绘制外部和内部边界

我在html画布上绘制了几个只包含笔划的形状，我想在它们周围绘制一个内边框和外边框

草案示例：

---

对于任何形状（假设它是仅闭合笔划的形状），是否有一个通用的为什么要这样做？

两种方法

这没有内置的方法，我使用两种编程方法。第一个是复杂的，包括扩展和收缩路径，然后沿着该路径绘制。这适用于大多数情况，但在复杂情况下会失败，解决方案有许多变量和选项来解释这些复杂情况以及如何处理它们

两者中的佼佼者

下面我介绍的第二种也是最简单的方法是使用

ctx.globalCompositeOperation

设置来屏蔽您想要绘制或不想要绘制的内容。当笔划沿中心绘制且填充填充到中心时，可以以所需宽度的两倍绘制笔划，然后遮罩内部或外部零件

当您开始创建非常复杂的图像时，这会成为问题，因为遮罩（全局合成操作）会干扰已绘制的图像

为了简化此过程，可以创建与原始画布大小相同的第二个画布作为草稿空间。然后你可以在刮痕画布上画出形状，做掩蔽，然后在工作画布上画刮痕画布

虽然该方法不如计算扩展或收缩路径的速度快，但它不会受到路径中移动点所面临的模糊性的影响。此方法也不会为内侧边或外侧边创建具有正确直线连接或斜接的直线，因为您必须使用其他方法。在大多数情况下，掩蔽是一个很好的解决方案

下面是绘制内部或外部路径的掩蔽方法的演示。如果通过包括绘制笔划和填充来修改遮罩，还可以设置偏移，以便轮廓或内联将偏移若干像素。我把它留给你了。（提示添加笔划并在绘制遮罩时将线宽设置为偏移距离的两倍）

var demo=function（）{
/**fullScreenCanvas.js开始**/
var canvas=（函数（）{
canvas=document.getElementById（“canv”）；
如果（画布！==null）{
document.body.removeChild（画布）；
}
//创建具有二维上下文的空白图像
canvas=document.createElement（“canvas”）；
canvas.id=“canv”；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
canvas.style.position=“绝对”；
canvas.style.top=“0px”；
canvas.style.left=“0px”；
canvas.style.zIndex=1000；
canvas.ctx=canvas.getContext（“2d”）；
document.body.appendChild（画布）；
返回画布；
})();
var ctx=canvas.ctx；
/**fullScreenCanvas.js结束**/
/**CreateImage.js开始**/
//创建具有二维上下文的空白图像
var createImage=函数（w，h）{
var image=document.createElement（“画布”）；
image.width=w；
image.height=h；
image.ctx=image.getContext（“2d”）；
返回图像；
}  
/**CreateImage.js结束**/
//为演示定义一个形状
var形状=[0.1,0.1,0.9,0.1,0.5,0.5,0.8,0.9,0.1,0.9]；
//将形状绘制为笔划
var strokeShape=函数（ctx）{
var w，h，i；
w=画布宽度；
h=画布高度；
ctx.beginPath（）；
ctx.moveTo（形状[0]*w，形状[1]*h）
对于（i=2；i