Question

如何将此功能旋转45度，使其成为钻石。我正在制作一个游戏，其中这个功能是玩家，你可以用箭头键移动它，但我希望它是钻石形状而不是正方形。

function morty() {
    ctx.fillStyle = "rgb(255,255,255)";
    ctx.fillRect(0,0,cv.width,cv.height);

    ctx.fillStyle = "rgb(255,255,255)";
    ctx.fillRect(x1,y1,50,50);

    ctx.fillStyle = "rgb(175,80,247)";
    ctx.fillRect(x1,y1,45,45);

    ctx.fillStyle = "rgb(50,100,150)";
    ctx.fillRect(x1,y1,40,40);

    ctx.fillStyle = "rgb(0,255,255)";
    ctx.fillRect(x1,y1,32,32);

    ctx.fillStyle = "rgb(250,0,250)";
    ctx.fillRect(x1,y1,27,27);

    ctx.fillStyle = "rgb(47,47,47)";
    ctx.fillRect(x1,y1,20,20);

    ctx.fillStyle = "rgb(255,255,0)";
    ctx.fillRect(x1,y1,10,10);

    ctx.fillStyle = "rgb(0,200,180)";
    ctx.fillRect(x1,y1,5,5);
}

Answer 1

您的方形飞行对角线是因为当您在旋转后移动(1, 0)时，您实际上在画布上移动(0.707, 0.707)，因为在坐标系旋转{{1}之后}。

所以，你想要的是ctx.rotate翻译真实有移动(1, 0)在画布上的效果，不应该旋转，然后移动{{1 }和(1, 0)输出。逻辑变为，

在x1上绘制一些正方形（因为y1位于(0, 0)的中心位置）
旋转
将广场移至ctx.rotate。

转换为脚本，我们应该知道在画布中，你应用变换的时间越晚，它就越有效。此外，我们希望在绘图完成后恢复坐标，因此脚本将是：

使用(0 0)保存当前未更改的坐标，稍后我们可以回复它。
我们希望移动(x1, y1)不受旋转的影响，因此我们首先调用ctx.save，它会在画布上移动x1, y1旋转的任何内容。
然后致电ctx.translate(x1, y1);进行以下绘图操作，旋转45度。
绘制正方形，但这一次，取而代之的是(x1, y1)，我们将它们绘制在ctx.rotate(45 / 180 * Math.PI);的中心。
调用x1, y1，因此如果您还有其他要绘制的内容，它仍将绘制在普通坐标上，而不是旋转移位的坐标上。

＆＃13;

(0, 0)

＆＃13;

ctx.restore

＆＃13;

如何旋转我在javascript中制作的方形函数？

1 个答案: