为什么这个方块不是正方形？

Question

我正在使用html canvas创建一个简单的方块。此方块的尺寸使用以下代码概述：

myGamePiece = new component(30, 30, "green", 1, 1);

然而，即使我给广场的尺寸为30乘30;我屏幕上的方块看起来像一个矩形。

Codepen

我认为问题与我如何在JS代码中调用新游戏片段有关但我不确定。任何帮助将不胜感激。

Answer 1

你的CSS类中有宽度和高度，如果你删除它将成为一个正方形。

Answer 2

这是因为您只需以像素为单位定义宽度和高度。因为您的屏幕可能不是正方形，因为像素比例如是1920 x 1080像素，所以正方形看起来像一个矩形。您需要获得宽度与高度的比率，并将其用作宽度或高度的因子。例如，您有一个200x100像素的屏幕。宽高比为200/100。所以你的方块必须是20 px宽和20/2 = 10px高。