Canvas 即使有代码也没有显示

Question

我正在尝试以编程方式在我的模块中的 Magic Mirror Dashboard 上显示 Gauge。

下面是我的代码示例：

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

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

如果我 'cut' 和 'paste' 上面的 canvas 元素，仪表会显示得很好。

Answer 1

根据 the documentation，如果你想用 Javascript.

加载仪表，你应该使用他们的 API

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

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

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

<script src="https://unpkg.com/canvas-gauges@2.1.7/gauge.min.js"></script>

我想是因为您将 canvas 附加到 Javascript，但未使用量规 API，所以您看到脚本出现问题，无法获取您的第一次添加 canvas 元素时动态创建

Canvas 即使有代码也没有显示

Canvas not showing even though the code is there

javascript

magic-mirror