Edge 未在 canvas 上正确设置高度

Question

我刚刚注意到 Edge 浏览器上的奇怪行为，我花了很多时间来弄清楚发生了什么。看起来当你在 canvas 上设置宽度和高度时，Edge 将只设置宽度属性。检查以下代码：

var canvas = document.createElement('CANVAS');
canvas.width = 1020;
canvas.height = 150;

var w = canvas.getAttribute('width'); // gets 1020
var h = canvas.getAttribute('height'); // gets null

在 Chrome/Edge 中关注 fiddle。

https://jsfiddle.net/gmuy4j95/4/

解决方法是手动设置属性。

canvas.setAttribute('height', canvas.height);

我发现了这个，因为我们的 ChartJs 在 Edge 上没有正确呈现。但即使是最新版本的 ChartJS 也使用 getAttribute 方法。有人可以向我解释发生了什么事吗？我在任何地方都没有发现这是报告的错误。

Answer 1

默认情况下，canvas 尺寸为 300 x 150，因此当您将高度或宽度设置为等于默认尺寸时，它会被覆盖

所以下面的设置没有用:

var canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 150;

document.getElementById('width').innerHTML = canvas.getAttribute('width');
document.getElementById('height').innerHTML = canvas.getAttribute('height');

但是，如果您可以设置默认值以外的高度或宽度，那么它应该在 Edge 和 Chrome 中反映和工作。

var canvas = document.createElement('canvas');
canvas.width = 1020;
canvas.height = 151;

document.getElementById('width').innerHTML = canvas.getAttribute('width');
document.getElementById('height').innerHTML = canvas.getAttribute('height');

Edge 未在 canvas 上正确设置高度

Edge does not set height on canvas properly

javascript

height

canvas

chart.js

microsoft-edge