在HTML画布中移动旋转的对象

Question

我有一个HTML画布。 在其中，我绘制了一个六边形。 六角形旋转到位。 好吧，现在我希望这个旋转的六角形沿着设定的路径移动。 我希望能够跟踪它的位置。

通常，当您要移动对象时，您会说：（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”。
也许这会帮助某人大声笑