Javascript 设置画布点的动画

我想设置画布菜单背景的动画。 点击菜单按钮，我想淡出一点视差效果的菜单

我创造了一把小提琴

我用“requestAnimationFrame”试过，但我不理解这个方法。它应该看起来像示例中的菜单。但是他们的代码我真的不明白

对不起，谢谢你的帮助

My current JS
function drawCanvas() {
    var $canvas = document.getElementById('nav-bg');
    var windowH = window.innerHeight;

    const fillColor = '#00ffcd';
    const ctx = $canvas.getContext('2d');

    $canvas.height = windowH;
    $canvas.width = $canvas.width;

    ctx.fillStyle = fillColor;
    ctx.beginPath();
    ctx.moveTo(550, 0);
    ctx.lineTo(550, windowH);
    ctx.lineTo(0, windowH);
    ctx.lineTo(125, 0);
    ctx.closePath();
    ctx.fill();
}

drawCanvas();

---

虽然我在德国，但他们的页面下载（和执行）非常慢。这就是为什么我没有看他们的代码，只是创建了一些看起来与他们相似的东西

在下面的代码片段中，我更改了一些内容（从SCS到CSS）。此外，再次单击按钮时，菜单不会折叠。我相信你会想出办法的

此外，我还利用：

const canvas=document.getElementById（'nav-bg'）；
const ctx=canvas.getContext（'2d'）；
常量fillColor='#00ffcd'；
常数firstStepDuration=500；//第一步是直到边界的方向改变
常数firstStepWidth=125；//第一步应该走多远？
const secondStepDuration=500；
const secondStepWidth=250；
让我们开始吧；
函数图（）{
const now=Date.now（）；
const time=now-startTime；//按钮单击后的时间
const height=canvas.height=window.innerHeight；
ctx.fillStyle=fillColor；
if（时间<第一步持续时间）{
ctx.beginPath（）；
ctx.moveTo（550,0）；
ctx.lineTo（550，高度）；
ctx.lineTo（第一步宽度*时间/第一步持续时间，高度）；
ctx.lineTo（时间/第一步持续时间*第一步宽度-第一步宽度，0）；
ctx.closePath（）；
ctx.fill（）；
}否则{
ctx.beginPath（）；
ctx.moveTo（550,0）；
ctx.lineTo（550，高度）；
ctx.lineTo（第一步宽度、高度）；
ctx.lineTo（（时间-第一步持续时间）/第二步持续时间*第二步宽度，0）；
ctx.closePath（）；
ctx.fill（）；
}
if（时间<第一步持续时间+第二步持续时间）{
//在下一个动画帧中再次调用draw
window.requestAnimationFrame（绘制）；
}
};
document.querySelector（“.nav按钮”）.addEventListener（'click'，function（）{
startTime=Date.now（）；
draw（）；
});
.nav按钮{
背景色：#00ffcd；
边界：0；
光标：指针；
浮动：左；
高度：60px；
大纲：0；
填充：0；
位置：固定；
左：25px；
顶部：25px；
宽度：60px；
z指数：99999；
}
span.图标栏{
背景色：黑色；
显示：块；
高度：5px；
左边距：15px；
边缘顶部：5px；
宽度：30px；
}
span.图标栏：第一个孩子{
边际上限：0；
}
.nav按钮：悬停>span.icon-bar.middle{
左边距：10px；
}
#航行{
背面可见性：隐藏；
底部：0；
显示：块；
身高：100%；
位置：固定；
左：0；
右：0；
z指数：500；
}
#导航背景{
位置：相对位置；
宽度：100%；
身高：100%；
背景尺寸：100%自动；
背景位置：中心；
}