如何使javascript形状与图像中的形状相同，以及如何在动画结束后清除javascript画布形状？

我把这段代码调整成三角形。它使用javascript动画来渲染三角形，但我不能让它移动到图像设置的位置，而是移动太多，如果我调整数字，它无法很好地到达图像中的三角形，并且角度不正确

此时，我需要黑色动画三角形与白色图像处于相同的角度，并且黑色三角形也必须移动到相同的位置，这意味着三角形必须与图像上的白色完全相同

而且，我只需按下一个按钮就可以完成整个功能，那么我如何清除javascript形状，然后在调用时，该形状将再次生成相同的动画呢？移除按钮必须移除黑色三角形，当再次按下“开始动画”按钮时，三角形将调用StartAnimation（）；功能

我必须如何做到这一点，以达到完美的结果

函数StartAnimation（）{
让
canvas=document.getElementById（'canvas'）；
让
ctx=canvas.getContext（'2d'）；
让
initCoor={
x1:ctx.canvas.width，
y1:0，
x2:ctx.canvas.width，
y2:ctx.canvas.height/2，
x3:ctx.canvas.width，
y3:ctx.canvas.height/2，
x4:（ctx.canvas.width-ctx.canvas.width/5），
y4:0，
};
函数initCanvas（）{
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
ctx.fillStyle=‘透明’；
ctx.fillRect（0，0，ctx.canvas.width，ctx.canvas.height）；
}
函数绘制_三角形（x1、y1、x2、y2、x3、y3、x4、y4、彩色）{
ctx.save（）；
ctx.beginPath（）；
ctx.moveTo（x1，y1）；
ctx.lineTo（x1，y1）；
ctx.lineTo（x2，y2）；
ctx.lineTo（x3，y3）；
ctx.lineTo（x4，y4）
ctx.fillStyle=颜色；
ctx.fill（）；
}
函数setAnimate（）{
initCoor.x4=ctx.canvas.height
&&initCoor.y3>=ctx.canvas.height）{
initCoor.y2=ctx.canvas.height；
initCoor.y3=ctx.canvas.height；
if（initCoor.x3看一看。我简化了你的动画逻辑。我制作了一个所需形状的巨大梯形。它从屏幕开始，然后简单地向左平移

我还制作了“重置”按钮，将
initCanvas（）
移动到
StartAnimation（）
之外，并在按下按钮时调用它

这可能不是你想要的结果，但我认为你可以更容易地从这一点继续下去


函数initCanvas（）{
const canvas=document.getElementById（'canvas'）；
const ctx=canvas.getContext（'2d'）；
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
ctx.fillStyle=‘透明’；
ctx.fillRect（0，0，ctx.canvas.width，ctx.canvas.height）；
}
函数StartAnimation（）{
让canvas=document.getElementById（'canvas'）；
设ctx=canvas.getContext（'2d'）；
设initCoor={
x1:ctx.canvas.width，
y1:0，
x2：（4/3）*ctx.canvas.width，
y2:ctx.canvas.height，
x3:（5/3）*ctx.canvas.width，
y3:ctx.canvas.height，
x4:（5/3）*ctx.canvas.width，
y4:0，
};
函数绘制_三角形（x1、y1、x2、y2、x3、y3、x4、y4、彩色）{
ctx.save（）；
ctx.beginPath（）；
ctx.moveTo（x1，y1）；
ctx.lineTo（x1，y1）；
ctx.lineTo（x2，y2）；
ctx.lineTo（x3，y3）；
ctx.lineTo（x4，y4）
ctx.fillStyle=颜色；
ctx.fill（）；
}
函数setAnimate（）{
initCoor.x1-=10；
initCoor.x2-=10；
initCoor.x3-=10；
initCoor.x4-=10；
if（initCoor.x2）如果您添加一些“开始”、“中途”和“最终”的图片，可能会很有用所需结果。您好。白色图像是最终结果，当黑色三角形移动时，它已停止在白色图像当前所在的位置，基本上黑色三角形必须结束，并且必须看起来与白色三角形完全相同。只是三角形目前不起作用。我还上传了一张图像进行解释。这里：我希望这有帮助图像只是动画的快速表示