在画布中沿相反方向移动矩形

Question

原谅菜鸟问题，对 JS 来说是全新的。

我已经成功地在画布中来回移动了一个矩形，我想添加第二个相反的方向（甚至上下）

唯一的问题是第二个矩形是静态的，我不能让它移动。

我可以在我的第一个正方形的同一个函数中放置一个新的 ctx.fillRect(x,y,w,h) 吗？

atm 看起来是这样的：

function drawSquare(ctx) {

    clearCanvas(ctx); 
    ctx.fillStyle = "black";
    ctx.fillRect(xpos, 140, 20, 20);
    if(direction==="goright"){
        if(xpos<canvasWidth - 20){xpos = xpos + 5;}else{direction = "left";}
    } if(direction==="left"){
        if(xpos>0){xpos = xpos - 5;}else{direction = "goright";}   
    }
    // This is the second square i am having trouble with??
    ctx.strokeStyle = "black";
    ctx.strokeRect(780, 200, 20, 20)

    if(direction==="goright"){
        if(xpos<canvasWidth - 20){xpos = xpos + 5;}else{direction = "left";}
    } if(direction==="left"){
        if(xpos>0){xpos = xpos - 5;}else{direction = "goright";}   
    }

如果需要，我有我的变量和其他编码。 但是我需要为第二个正方形设置第二个方向变量吗？ 还是我需要为它设置一个完全不同的函数和新的 setInterval？

Answer 1

您需要在更新xpos 变量之后 绘制第二个矩形，并使用xpos 变量。

function drawSquare(ctx) {
    clearCanvas(ctx); 
    if(direction==="goright"){
        if(xpos<canvasWidth - 20){xpos = xpos + 5;}else{direction = "left";}
    } if(direction==="left"){
        if(xpos>0){xpos = xpos - 5;}else{direction = "goright";}   
    }
    ctx.fillStyle = "black";
    ctx.fillRect(xpos, 140, 20, 20);

    if(direction==="goright"){
        if(xpos<canvasWidth - 20){xpos = xpos + 5;}else{direction = "left";}
    } if(direction==="left"){
        if(xpos>0){xpos = xpos - 5;}else{direction = "goright";}   
    }
    // This is the second square i am having trouble with??
    ctx.strokeStyle = "black";
    ctx.strokeRect(xpos, 200, 20, 20)
}

这是一个有效的 sn-p

var
    ctx = document.getElementById('c').getContext('2d'),
    xpos = 0, t,
    canvasWidth = 256,
    direction = "goright"
; 

function drawSquare(ctx) {
        ctx.clearRect(0,0,256,256); 
        if(direction==="goright"){
            if(xpos<canvasWidth - 20){xpos = xpos + 5;}else{direction = "left";}
        } if(direction==="left"){
            if(xpos>0){xpos = xpos - 5;}else{direction = "goright";}   
        }
        ctx.fillStyle = "black";
        ctx.fillRect(xpos, 140, 20, 20);
        
        if(direction==="goright"){
            if(xpos<canvasWidth - 20){xpos = xpos + 5;}else{direction = "left";}
        } if(direction==="left"){
            if(xpos>0){xpos = xpos - 5;}else{direction = "goright";}   
        }
        // This is the second square i am having trouble with??
        ctx.strokeStyle = "black";
        t = window.performance.now();
        ctx.strokeRect(xpos + Math.cos(t * 0.001) * 32, Math.sin(t * 0.001) * 118 + 128, 20, 20)
    }

window.requestAnimationFrame(function draw() {
drawSquare(ctx);
  window.requestAnimationFrame(draw);
});

<canvas width="256" height="256" id="c"></canvas>