javascript canvas 如果调整浏览器 window 的大小，则只绘制第二张图片

Question

我正在使用 React，我有一个 canvas，中间有一个绿色方块，左边有一个红色矩形。 问题是只有第一个矩形被绘制，如果我调整浏览器的大小，另一个被绘制。

 const Canvas = props => {   

        
        useEffect(() =>{
            var player1 = { x: playerX, y: playerY, draggable: gameStatus }
            var enemy1 = { x: enemy1X, y: enemy1Y, width: enemy1Width, height: enemy1Height}


            const drawFun = () => {

                context.clearRect(0,0, canvasWidth, canvasHeight)

                context.beginPath();
                context.fillStyle = '#00f4cc'
                context.fillRect(player1.x, player1.y, playerWidth, playerHeight)

                context.beginPath();
                context.fillStyle = 'red'
                context.fillRect(enemy1.x, enemy1.y, enemy1Width, enemy1Height)



                requestAnimationFrame(drawFun);
            }
            drawFun();

第二个红色方块被绘制在它应该在的地方，我只需要调整浏览器的大小 window 来确认它。 我不确定为什么调整 window 有帮助，感谢任何帮助！

Answer 1

我猜想您尝试绘制矩形的坐标超出了浏览器 window（或画布定义的尺寸）。 但是，如果通过调整浏览器 window 的大小来解决这个问题，那么情况可能并非如此，因为 canvas 总是从 (0,0) 开始。

我建议打印出 enemy.x console.log(enemy.x); 如果值为负，则矩形被切掉。

我不确定这是否是实际原因，但希望对您有所帮助