边缘没有在画布上正确设置高度答案

【问题标题】：Edge does not set height on canvas properly边缘没有在画布上正确设置高度
【发布时间】：2019-06-02 07:14:13
【问题描述】：

我刚刚注意到 Edge 浏览器上的奇怪行为，我花了很多时间来弄清楚发生了什么。看起来当您在画布上设置宽度和高度时，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 中打开以下小提琴。

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

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

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

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

【问题讨论】：

这确实是一个错误，但我真的想知道为什么 chartJS 会使用 HTML 属性而不是 DOM IDL 属性......他们会用那个字符串做什么？
我从 CDN 打开 ChartJS 文件，并且有评论告诉它如果是默认值，则该值为 null - cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js（第 10617 行）。但是它可以在 Chrome 中使用。
其实我也是这样there。我没有仔细阅读，但听起来他们使用它来查看画布大小是否设置为默认值以外的其他值，并确定他们是否应该使用默认值？听起来像真正糟糕的设计...您可能想向 ChartJS 提出有关此测试在默认尺寸的 Edge 上失败的问题。

标签： javascript canvas chart.js height microsoft-edge

【解决方案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');

【讨论】：