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

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

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

@@ 6行目: / 6行目: @@
 <script src="https://wiki.yo-net/vexflow/build/cjs/vexflow.js"></script>
 <script>
-  // YOUR CODE GOES HERE
+const { Renderer, Stave } = Vex.Flow;
+// Create an SVG renderer and attach it to the DIV element with id="output".
+const div = document.getElementById('output');
+const renderer = new Renderer(div, Renderer.Backends.SVG);
+// Configure the rendering context.
+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>