HTML5 画布宽度/高度不正确

Question

我正在编写一个小游戏，它将在屏幕上包含框，我暂时使用简单的矩形作为占位符。但是，当我设置矩形的宽度和高度时，即使它们都设置为相同的长度，例如 100x100，高度显然比宽度长得多，就好像我已将其设置为 100x140。

我有设置画布分辨率的基本内容：

<canvas id='canvas' style='border: 1px solid; width: 1920px; height: 1080px;'>
</canvas>
<script>
    var canvas = document.querySelector('Canvas');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var ctx = canvas.getContext('2d');

但我一定做错了什么/错过了什么。我尝试将其从 1920x1080 更改为其他分辨率，但它不能解决问题。有什么想法吗？

Answer 1

您需要描述画布不同更改代码：

<canvas id='canvas' style='border: 1px solid; width: 1920px; height: 1080px;'>
</canvas>

自：

<canvas id='canvas' style='border: 10px solid' width= '1920' height= '1080' ;>
</canvas>

这就是你应该如何描述画布，一切都应该:D