Question

我只是注意到Edge浏览器上的异常行为，所以花了很多时间来弄清楚发生了什么。看起来就像在画布上设置宽度和高度时，那么Edge只会设置width属性。检查以下代码：

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中打开小提琴。

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

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

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

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

Answer 1

默认情况下，画布大小为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');

边缘未在画布上正确设置高度

1 个答案: