Canvas 如何在二维画布中添加矩形角？

我在2D画布上工作，我想在矩形的每个角添加这个角（请参见图片），这个矩形的大小不是固定的，我可以通过拖动鼠标按钮来改变矩形的大小，我已经做了灵活的矩形。请任何人都可以帮助我，如何添加这些角落，它应该根据矩形大小灵活

 function draw() {
        ctx.fillStyle = "#6E97B1";  
        width += deltaMove.x;
        height += deltaMove.y;
        var CrosshairSize = 6;
        ctx.strokeStyle = '#00BEFE';  
        ctx.globalAlpha = 0.3;
        ctx.lineWidth = 1;
        ctx.fillRect(startposition.x, startposition.y, width, height);
        ctx.strokeRect(startposition.x + (1 + width / 2), startposition.y + (height / 2) - (CrosshairSize / 2), 1, CrosshairSize);
        ctx.strokeRect(startposition.x + (1 + width / 2) - (CrosshairSize / 2), startposition.y + (height / 2), CrosshairSize, 1); }

---

我想你可能想要以下的东西

//================================================================
//drawBox函数
//论据
//x，y：盒子的左上角
//w，h：宽度和高度。如果你有一个坐标，宽度和高度
//可以计算mouseX-x，mouseY-y，其中x和y是
//盒子的左上角。
//交叉头发尺寸：一只手臂。总尺寸为crosshairSize*2+detailWidth
//细节宽度：细节的宽度
//填充：矩形填充颜色的背景
//颜色
功能绘图框（x、y、w、h、十字线尺寸、detailWidth、fill、detailCol）{
函数drawCross（x，y，s，w）{//绘制十字线s是大小，w是宽度
常数hw=w/2；//半宽
ctx.beginPath（）；
ctx.lineTo（x-hw，y-hw）；
ctx.lineTo（x-hw，y-s）；
ctx.lineTo（x+hw，y-s）；
ctx.lineTo（x+hw，y-hw）；
ctx.lineTo（x+s，y-hw）；
ctx.lineTo（x+s，y+hw）；
ctx.lineTo（x+hw，y+hw）；
ctx.lineTo（x+hw，y+s）；
ctx.lineTo（x-hw，y+s）；
ctx.lineTo（x-hw，y+hw）；
ctx.lineTo（x-s，y+hw）；
ctx.lineTo（x-s，y-hw）；
ctx.closePath（）；
ctx.fill（）
}
函数drawCorner（x，y，dx，dy，s，w）{//绘制十字线s是大小，w是宽度
//dx和dy是方向
常数hw=w/2；//半宽
ctx.beginPath（）；
ctx.lineTo（x，y）；
ctx.lineTo（x+dx*s，y）；
ctx.lineTo（x+dx*s，y+dy*w）；
ctx.lineTo（x+dx*w，y+dy*w）；
ctx.lineTo（x+dx*w，y+dy*s）；
ctx.lineTo（x，y+dy*s）；
ctx.closePath（）；
ctx.fill（）；
}
ctx.fillStyle=填充；
ctx.fillRect（x，y，w，h）；
ctx.fillStyle=detailCol；
十字交叉（x+w/2，y+h/2，十字丝尺寸，宽度）；
抽角（x，y，1，1，十字丝尺寸*2，宽度）；
拉丝角（x+w，y，-1,1，十字丝尺寸*2，细节宽度）；
拉丝角（x+w，y+h，-1，-1，十字丝尺寸*2，细节宽度）；
拉丝角（x，y+h，1，-1，十字丝尺寸*2，细节宽度）；
}
//功能结束
// ===========================================
//代码的其余部分只是为了制作动画
const ctx=canvas.getContext（“2d”）；
函数主循环（时间）{
ctx.clearRect（0,0300150）；
var w=数学绝对值（数学正弦值（时间/10000）*110）+20；
var h=Math.abs（Math.sin（time/3791）*45）+20；
//调用drawBox函数
抽屉（150-w，75-h，w*2，h*2,8,4，“#6E97B1”，“#00BEFE”）；
requestAnimationFrame（主循环）；
}
requestAnimationFrame（主循环）；
//代码猴子请付2个花生和一个香蕉。
是的，这正是我想要的。非常感谢：）请你给我一点建议，如何停止这个移动的盒子动画。我想做完全相同的事情，但当我将鼠标点拖动到鼠标下降事件中时，此框应在鼠标上升事件中消失。提前感谢：）@Mhd我已在代码中添加了一些注释以使其更清晰。注释中没有空间解释如何设置用户输入的动画。尝试搜索Stackoverflow，可能有人已经问过如何做了。如果你找不到一个例子，问另一个问题。但请注意，我们不是一个代码编写服务，所以请在问题中包含您尝试过的代码。是的，当然！！谢谢你的帮助：）