Question

我有一个HTML画布。在里面，我画了一个六边形。六边形旋转到位。那么现在我希望这个旋转的六边形沿着一条固定的路径移动。我希望能够追踪它的位置。

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

在这种情况下，我使用translate和rotate来赋予它旋转效果。因此，将+2添加到它的x位置只会让它以更大的圆圈旋转。

这是我得到的，谢谢！

   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（）位于循环内部，因此每帧都会调用它。

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

Answer 1

好吧，我想通了，我觉得很蠢。

您只需将所需的移动金额添加到第一个翻译中。

<强>所以：

ctx.translate(356.5, 700);

<强>变为：

ctx.translate(356.5, 700+moveAmount);

这将使每帧“moveAmount”直接向下移动。
也许这会帮助别人lol

在HTML Canvas中移动旋转对象

1 个答案: