为什么这个基本的 VEXFLOW 代码什么也不渲染？答案

【问题标题】：Why this basic VEXFLOW code is rendering nothing?为什么这个基本的 VEXFLOW 代码什么也不渲染？
【发布时间】：2021-04-17 10:36:40
【问题描述】：

我在 VEXFLOW 中有一段代码

  <!DOCTYPE html>
    
    <html><head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://unpkg.com/vexflow/releases/vexflow-min.js"></script>
    
      <script>
        $(function() {
        
          
          import Vex from 'vexflow';
    
    const vf = new Vex.Flow.Factory({
      renderer: {elementId: 'boo', width: 500, height: 200}
    });
    
    const score = vf.EasyScore();
    const system = vf.System();
    
    system.addStave({
      voices: [
        score.voice(score.notes('C#5/q, B4, A4, G#4', {stem: 'up'})),
        score.voice(score.notes('C#4/h, C#4', {stem: 'down'}))
      ]
    }).addClef('treble').addTimeSignature('4/4');
    
    vf.draw();
        });
      </script>
    </head>
    
    <body>
     <div id="boo"></div>
    
    
    </body></html>

为什么这段代码没有渲染任何东西。在浏览器中看不到任何内容。

【问题讨论】：

标签： javascript html rendering vexflow

【解决方案1】：

<!DOCTYPE html>

<html>
  <body>
    <div id="boo"></div>
  </body>
</html>
<script src="https://unpkg.com/vexflow/releases/vexflow-min.js"></script>
<script>
  const vf = new Vex.Flow.Factory({
    renderer: { elementId: "boo", width: 500, height: 200 }
  });

  const score = vf.EasyScore();
  const system = vf.System();

  system
    .addStave({
      voices: [
        score.voice(score.notes("C#5/q, B4, A4, G#4", { stem: "up" })),
        score.voice(score.notes("C#4/h, C#4", { stem: "down" }))
      ]
    })
    .addClef("treble")
    .addTimeSignature("4/4");

  vf.draw();
</script>

【讨论】：