「VexFlow 入門その1」の版間の差分

2022年12月12日 (月) 18:32時点における版

　ひとつひとつの構成要素を知る前に入門用の楽譜をいくつか描いて全貌をつかもうとするのが最初です。

@@ 8行目: / 8行目: @@
 const { Renderer, Stave } = Vex.Flow;
-// Create an SVG renderer and attach it to the DIV element with id="output".
+// Create an SVG renderer and attach it to the DIV element named "boo".
-const div = document.getElementById('output');
+const div = document.getElementById("output");
 const renderer = new Renderer(div, Renderer.Backends.SVG);
@@ 15行目: / 15行目: @@
 renderer.resize(500, 500);
 const context = renderer.getContext();
-context.setFont('Arial', 10);
-// Create a stave of width 400 at position 10, 40.
-const stave = new Stave(10, 40, 400);
-// Add a clef and time signature.
-stave.addClef('treble').addTimeSignature('4/4');
-// Connect it to the rendering context and draw!
-stave.setContext(context).draw();
 </yjavascript>