Javascript 两个动画将在一个页面上执行，一个在画布上，另一个在画布上

实际上，我有一组点，当它们连接起来时，就像水平和垂直连接的管道一样。我想要一个像这样的管道动画

var canvas1=$（“#mainCanvas1”）[0]；
var ctx1=canvas1.getContext（“2d”）；
var点数=[[250300]、[250150]、[450150]、[450,50]、[150,50]、[150300]；
变量gradColor=[“1FB0FF”、“0AA9FF”、“009FF5”、“0092E0”、“0085CC”]；
drawConnectionPipe（ctx1，points，15，gradColor[0]，gradColor[1]，gradColor[2]，gradColor[3]，gradColor[4]）；
功能绘图连接管（ctx、coorinateArray、厚度、渐变色灯1、渐变色灯2、渐变色、渐变色黑K1、渐变色黑K2）{
ctx.save（）；
gradColorNew=[gradColorDark2，gradColorLight1，gradColorLight2，gradMidColor，gradColorDark1]；
var gradientObject=null；
对于（变量i=0；i pipeEnds.y）{
//端点y大于起点y向上移动
d=“向上”；
函数animloop（）{
如果（ny>pipeEnds.y）{
ctx.clearRect（0，0，w，h）；
drawCircle（纽约州西北部）；
纽约--；
nx=nx；
请求动画帧（animloop）；
}else if（ny==pipeEnds.y）{
取消动画帧（animloop）；
particle.callBegin（）；
}
}
animloop（）；
}else if（pipeBegin.ypipeEnds.x）{
d=“左”；
函数3（）{
如果（nx>pipeEnds.x）{
ctx.clearRect（0，0，w，h）；
drawCircle（纽约州西北部）；
nx--；
ny=ny；
请求animframe（animloop3）；
}else if（ny==pipeEnds.y）{
取消动画帧（animloop3）；
particle.callBegin（）；
}
}
animloop3（）；
}else if（nx==pipeEnds.x）{
取消动画帧（animloop2）；
particle.callBegin（）；
}
}
}
this.callBegin=函数（）{
如果（pipeIndex，只需添加一行即可

ctx1.globalAlpha = 0.7;  

在函数中
drawpipe（）
（第183行）。

这相当于使管道在1到0.7之间透明

或者，你可以在绘制管道后绘制圆。
谢谢。效果很好！但根据我想在管道中设置渐变动画的代码。你可以做任何你想做的事情，只需将代码设置为动画即可。
var ParticleGen = function () {
    var particle = this;
    // begin
    // directions, upto
    this.begin = function () {
        var pipeBegin = points[pipeIndex];
        var pipeEnds = points[pipeIndex + 1];
        nx = pipeBegin.x;
        ny = pipeBegin.y;
        if (pipeBegin.x == pipeEnds.x) {
            if (pipeBegin.y > pipeEnds.y) {
                // endpoint y greater than start point y moving upwards
                d = "up";

                function animloop() {
                    if (ny > pipeEnds.y) {
                        ctx.clearRect(0, 0, w, h);
                        drawCircle(nx, ny);
                        ny--;
                        nx = nx;
                        requestAnimFrame(animloop);
                    }else if (ny == pipeEnds.y) {
                        cancelAnimationFrame(animloop);
                        particle.callBegin();
                    }

                }
                animloop();
            } else if (pipeBegin.y < pipeEnds.y) {
                d = "down";

                function animloop1() {
                    if (ny < pipeEnds.y) {
                        ctx.clearRect(0, 0, w, h);
                        drawCircle(nx, ny);
                        ny++;
                        nx = nx;
                        requestAnimFrame(animloop1);
                    } else if (ny == pipeEnds.y) {
                        cancelAnimationFrame(animloop1);
                        particle.callBegin();
                    }

                }
                animloop1();

            } 
        } else if (pipeBegin.y == pipeEnds.y) {
            if (pipeBegin.x < pipeEnds.x) {
                // start.x < end.x right movement
                d = "right";

                function animloop2() {
                    if (nx < pipeEnds.x) {
                        ctx.clearRect(0, 0, w, h);
                        drawCircle(nx, ny);
                        nx++;
                        ny = ny;
                        requestAnimFrame(animloop2);
                    } else if (ny == pipeEnds.y) {
                        cancelAnimationFrame(animloop2);
                        particle.callBegin();
                    }

                }
                animloop2();
            } else if (pipeBegin.x > pipeEnds.x) {
                d = "left";

                function animloop3() {
                    if (nx > pipeEnds.x) {
                        ctx.clearRect(0, 0, w, h);
                        drawCircle(nx, ny);
                        nx--;
                        ny = ny;
                        requestAnimFrame(animloop3);
                    } else if (ny == pipeEnds.y) {
                        cancelAnimationFrame(animloop3);
                        particle.callBegin();
                    }

                }
                animloop3();

            } else if (nx == pipeEnds.x) {
                cancelAnimationFrame(animloop2);
                particle.callBegin();
            }
        }
    }
    this.callBegin = function () {
        if (pipeIndex <= 3) {
            pipeIndex++;
            console.log(pipeIndex)
            particle.begin();
        }

    }
};

function drawCircle(cx, cy) {
    // console.log(cx+ " :cx, cy: "+cy+ " : drawCircle")
    ctx.beginPath();
    ctx.arc(cx, cy, 2, 0, 2 * Math.PI, false);
    ctx.fillStyle = "black";
    ctx.fill();
    ctx.closePath();
}

ctx1.globalAlpha = 0.7;