即使代码在那里，画布也不显示答案

【问题标题】：Canvas not showing even though the code is there即使代码在那里，画布也不显示
【发布时间】：2021-10-12 16:26:12
【问题描述】：

我正在尝试以编程方式在我的模块中的魔镜仪表板上显示Gauge。

以下是我的代码示例：

    var indoorGauge = document.createElement('canvas');
    indoorGauge.id = 'indoorGauge';
    ...
    indoorGauge.setAttribute('data-animation-target','plate');  
    indoorPressure.appendChild(indoorGauge);        
    insideTele.appendChild(indoorPressure);
    wrapper.appendChild(insideTele);

仪表不显示或渲染。我发现奇怪的是，当我检查元素时，画布就在那里并且它可以工作，因为当我剪下元素并重新粘贴它时，它会显示出来并完美地工作！

如果我“剪切”和“粘贴”上面的画布元素，仪表会显示得很好。

【问题讨论】：

完成代码
完成代码是什么意思？省略号只是表示额外的属性。
包装器在哪里？
包装器是魔镜模块的一部分。它里面的任何元素都会显示得很好。只有画布不渲染。我将一些图片附加到原始帖子
一开始不要使用append。在 HTML 代码中创建一个画布元素并将其 id 提供给您的gauge，它的工作？

标签： javascript magic-mirror

【解决方案1】：

根据the documentation，如果您想使用 Javascript 加载仪表，您应该使用他们的 API。

const indoorGauge = document.createElement('canvas');

indoorGauge.id = "indoorGauge"
document.body.appendChild(indoorGauge);

new LinearGauge({
  renderTo: 'indoorGauge'
}).draw();

&lt;script src="https://unpkg.com/canvas-gauges@2.1.7/gauge.min.js"&gt;&lt;/script&gt;

我想这是因为您在画布上附加了 Javascript，但没有使用仪表 API，这就是为什么您在第一次添加时看到脚本没有拾取动态创建的画布元素的问题

【讨论】：