Javascript HTML5帆布扇贝形状

我真的非常需要帮助如何创建一个扇贝形状使用画布 我试着玩云示例，但要创建我想要的东西对我来说真的很困难

我只是想知道矩形和圆形扇形的代码

这就是我想要的图像。

它的设计不必完全相同，但尽可能看起来像这样

非常感谢您。请使用“贝塞尔曲线法”制作复杂形状

我建议继续使用贝塞尔曲线，以了解其复杂性。我希望这有帮助：）

编辑：贝塞尔曲线的工作原理如下：

---

ctx.BezierrCurveto（控制点x、控制点y、第二控制点x、第二控制点y、精加工点x、精加工点y）

您可以使用虚线划线绘制这样的形状，就像这样（有点棘手）

JavaScript:

const canvas = document.querySelector("#canvas");
canvas.width = canvas.height = 300;
const ctx = canvas.getContext("2d");
const rect = [50, 50, 200, 200];
//draw dotted line dash.
ctx.lineCap = "round";
ctx.setLineDash([0, 40]);
ctx.lineDashOffset = 20;
ctx.lineWidth = 42;
ctx.strokeStyle = "purple";
ctx.strokeRect(...rect);
//remove disuse range.
ctx.globalCompositeOperation = "destination-out";
ctx.lineWidth = 38;
ctx.strokeRect(...rect);
ctx.fillRect(...rect);

演示：

---

来自一个较旧的答案，但这个问题非常模糊，而且有很多额外的负担。下面是这个答案的一个片段。它有一些额外的代码，可能是有用的，但不是直接相关的

功能显示（大约向下一半）完成了大部分工作，将圆弧添加到对象框中

有关说明，请参阅运行演示

const pointSize=4；
const pointCol=“#4AF”；
var arcDepth=-0.5；//弧深作为直线段长度的一个因素
//请注意，让arc以另一种（积极的）方式运行
//通过添加逆时针标志更改ctx.arc draw调用
//有关更多信息，请参见drawArc
常数arcCol=“#F92”；
常数弧宽=8；
//找到一个适合3个点的圆。
功能fitCircleTo3P（p1x、p1y、p2x、p2y、p3x、p3y、arc）{
var vx，
vy，
C
c1，
U
c=（p2x-p1x）/（p1y-p2y）；//向量从向量1到向量2的斜率
c1=（p3x-p2x）/（p2y-p3y）；//向量从向量2到向量3的斜率
//在本例中不会发生这种情况
如果（c==c1）{//如果斜率相同，它们必须在同一条线上
return null；//点在一行中
}
//找到中心
如果（p1y==p2y）{//p1和p2的特殊情况具有相同的y
vx=（p1x+p2x）/2；
vy=c1*vx+（（p2y+p3y）/2）-c1*（（p2x+p3x）/2）；
}否则
如果（p2y==p3y）{//p2和p3的特殊情况具有相同的y
vx=（p2x+p3x）/2；
vy=c*vx+（（p1y+p2y）/2）-c*（（p1x+p2x）/2）；
}否则{
vx=（（（p2y+p3y）/2）-c1*（（p2x+p3x）/2））-（u=（（p1y+p2y）/2）-c*（（p1x+p2x）/2））/（c-c1）；
vy=c*vx+u；
}
弧x=vx；
弧y=vy；
vx=p1x-vx；
vy=p1y-vy；
arc.rad=数学sqrt（vx*vx+vy*vy）；
返回弧；
}
var点=[]；
var弧=[]；
功能添加弧（p1、p2、深度）{
var弧={
p1:p1，
p2:p2，
深度：深度，
rad:null，//半径
a1:null，//从
a2:null，//到的角度
x:null，
y:空，
}
弧。推（弧）；
返回弧；
}
功能（圆弧、深度）{
var p=点[arc.p1]；//获取点
var pp=点[arc.p2]；
//如果需要，改变深度
深度=弧深=深度！==未定义？深度：弧深；
var vx=pp[0]-p[0]；//从p到pp的向量
var-vy=pp[1]-p[1]；
var cx=（pp[0]+p[0]）/2；//中心点
var cy=（pp[1]+p[1]）/2；//中心点
var len=Math.sqrt（vx*vx+vy*vy）；//获取长度
cx-=vy*depth；//在与直线和距离深度成90度的位置找到3个点
cy+=vx*深度；
//要将深度作为固定长度，请取消注释下面的4行，并注释掉上面的2行。
//var nx=vx/len；//归一化向量
//var ny=vy/len；
//cx-=ny*深度；//在与直线和距离深度成90度的位置找到3个点
//cy+=nx*深度；
fitCircleTo3P（p[0]，p[1]，cx，cy，pp[0]，pp[1]，arc）；//获取适合的圆
arc.a1=Math.atan2（p[1]-arc.y，p[0]-arc.x）；//获取圆心到第一点的角度
arc.a2=Math.atan2（pp[1]-arc.y，pp[0]-arc.x）；//获取圆心到第二点的角度
}
函数添加点（x，y）{
点。推力（[x，y]）；
}
功能绘图点（x、y、尺寸、柱）{
ctx.fillStyle=col；
ctx.beginPath（）；
弧（x，y，大小，0，数学π*2）；
ctx.fill（）；
}
函数drawArcStart（宽度，列）{
ctx.lineCap=“圆形”；
ctx.strokeStyle=col；
ctx.lineJoin=“圆形”；
ctx.lineWidth=宽度；
ctx.beginPath（）；
}
功能drawArc（arc）{
弧（弧x、弧y、弧弧度、弧a1、弧a2）；
}    
函数drawArcDone（）{
ctx.closePath（）；
ctx.stroke（）；
}
函数findClosestPoint（x、y、dist）{
var指数=-1；
对于（变量i=0；i