为什么我的浏览器呈现双倍的高度值？

Question

如果运行下面的代码和 DOM，我的浏览器将呈现双倍的所有高度值。

首先，我在 about:blank.

中测试了以下代码在 html:

...
<canvas id="canvasArea" style="
    width: 500px;
    height: 500px;
    background-color: E0E0E0;
"></canvas>
...

并且在 js 中：

let cv = document.getElementById("canvasArea");
let cvArea = cv.getContent('2d');

cvArea.fillRect(10, 10, 50, 50); // I was thinking this Rect is square
cvArea.fillRect(60, 10, 50, 25); // and this Rect is long rectangle

我在想第一个矩形将绘制正方形。但首先是长矩形。

为什么会这样？

Answer 1

JS 画布不知道 CSS 设置的维度。

使用HTML属性或使用JS设置。

let cv = document.getElementById("canvasArea");
let cvArea = cv.getContext('2d');

cvArea.fillRect(10, 10, 50, 50); // I was thinking this Rect is square
//cvArea.fillRect(60, 10, 50, 25); // and this Rect is long rectangle

<canvas id="canvasArea" width="500" height="500" style="
    background-color: #E0E0E0;
"></canvas>

为什么我的浏览器呈现双倍的高度值？

Why does my browser render double the height value?

html

javascript

canvas

microsoft-edge