javascript - 在 HTML Canvas 中移动旋转对象

Question

我有一个 HTML Canvas 。我在里面画了一个六边形。六边形原地旋转。现在我希望这个旋转六边形沿着设定的路径移动。我希望能够跟踪它的位置。

通常，当你想移动一个对象时，你可以说:(object.x+howmuchtomove)，它会简单地移动那么多，你只需添加 object.x+howmuchtomove 即可获取 x 坐标来跟踪它的行踪。

在本例中，我使用平移和旋转来赋予其旋转效果。因此，在其 x 位置上添加 +2 只会使其旋转更大的圆圈。

这是我得到的，谢谢!

   retObject.draw = function() {    
        // Wipe the canvas      
        ctx.fillStyle = "rgba(0, 0, 0, 1)";         
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Draw rotating shape
        ctx.save(); // Don't rotate everything
        ctx.strokeStyle="red"; // Set Color     
        ctx.translate(356.5, 700); // Center pivot inside hexagon
        ctx.rotate(rotValue*(Math.PI/180)); // Rotate           
        ctx.translate(-356.5, -700); // Un-Translate    
            for (i=0;i<3;i++) {
                ctx.beginPath();        
                ctx.moveTo(300, 700); 
                ctx.lineTo(330, 650);
                ctx.lineTo(383, 650);
                ctx.lineTo(413, 700);
                ctx.lineTo(383, 750);
                ctx.lineTo(330, 750);
                ctx.lineTo(300, 700);
                ctx.stroke(); // Draw Hexagon
            }
        ctx.restore(); // Get back normal
    }

请注意，draw() 位于循环内部，因此每帧都会调用它。

所以，为了简单起见，假设我只想让这个旋转六边形垂直落下。基本上我想在每一帧的 y 坐标上添加 +1。

Answer 1

好吧，我明白了，但我觉得自己很愚蠢。

您只需将所需的移动量添加到第一个翻译即可。

所以:

ctx.translate(356.5, 700);

变成:

ctx.translate(356.5, 700+moveAmount);

这将使其每帧直线向下移动“moveAmount”。
也许这会对某人有所帮助，哈哈