javascript - 要在单个页面中执行两个动画，一个在 Canvas 中一个在另一个上

Question

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

var canvas1 = $("#mainCanvas1")[0];
var ctx1 = canvas1.getContext("2d");
var points = [[250,300],[250,150],[450,150],[450,50],[150,50],[150,300]];
var gradColor = ["#1FB0FF","#0AA9FF", "#009FF5",'#0092E0', "#0085CC"];
drawConnectionPipe(ctx1,points,15,gradColor[0],gradColor[1], gradColor[2],gradColor[3], gradColor[4]);
function drawConnectionPipe(ctx,coorinateArray,thickness,gradColorLight1, gradColorLight2,gradMidColor,gradColorDark1, gradColorDark2){
    ctx.save();
    gradColorNew = [gradColorDark2,gradColorLight1, gradColorLight2,gradMidColor,gradColorDark1];

    var gradientObject = null;
    for(var i=0; i<coorinateArray.length-1; i++){
        var startPt = coorinateArray[i];
        var endPt = coorinateArray[i+1];
        gradientObject = ctx.createLinearGradient(startPt[0],startPt[1],endPt[0] , endPt[1]);

        gradientObject.addColorStop(0, gradColorLight1);
        gradientObject.addColorStop(0.25, gradColorLight2);
        gradientObject.addColorStop(0.5, gradMidColor);
        gradientObject.addColorStop(0.75, gradColorDark1);
        gradientObject.addColorStop(1, gradColorDark2);
        ctx.lineWidth=thickness;
        ctx.strokeStyle = gradientObject;
        ctx.lineJoin = "round";

        ctx.beginPath();
        ctx.moveTo(startPt[0],startPt[1]);
        ctx.lineTo(endPt[0], endPt[1]);
        ctx.closePath();
        ctx.stroke();
        //ctx.globalCompositeOperation = 'source-over';
    }
    // chnge the order
    window.setTimeout(gameLoop, 150);
    function gameLoop() {
        if(gradColorNew.length == 5){

            drawConnectionPipe(ctx,coorinateArray,thickness,gradColorNew[0],gradColorNew[1], gradColorNew[2],gradColorNew[3], gradColorNew[4]);
        }
    }
    ctx.restore();
}    

在里面我希望粒子像this一样移动。

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();
}

我在不同的 Canvas 和不同的页面中都有动画。我想将它们组合起来以获得水流的效果。

我可以这样做this 。 但粒子不能没有错误地被看到。

请帮忙。

提前谢谢

Answer 1

只需添加一行即可完成

ctx1.globalAlpha = 0.7;  

在函数 drawpipe() 中(第 183 行)。
这可以让你的管道透明度从 1 到 0.7

或者您可以在绘制管道后绘制圆。