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

2022年12月12日 (月) 22:02時点における版

概要

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

　スクリプトは以下のとおり。

<div id="output"></div>
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const {
  Renderer,
  Stave
} = Vex.Flow;

// Create an SVG renderer and attach it to the DIV element named "boo".
const div = document.getElementById('output');
const renderer = new Renderer(div, Renderer.Backends.SVG);

// Configure the rendering context.
renderer.resize(500, 200);
const context = renderer.getContext();

// Create a stave of width 400 at position 10, 40 on the canvas.
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();
</script>

　最初に、div に出力するタグを取得する。ここでは <div id="output"></div> のタグ全体要素を取得している。次にnew Renderer(div, Renderer.Backends.SVG); で

@@ 54行目: / 54行目: @@
 context.beginPath() // start recording our pen's moves.
-   .moveTo(0, 0)     // pick up the pen and set it down at x=0, y=0 (top/left corner of the context).
+   .moveTo(0, 0)
-   .lineTo(10, 0)    // add a line toward the right (0, 0) => (50, 0).
+  .lineTo(500, 0)
-   .lineTo(10, 40)   // add a line to the left and down (50, 0) => (25, 50).
+  .lineTo(500, 200)
-   .closePath()      // add a line back to where the path started (0, 0) closing the triangle.
+   .lineTo(0, 200)
+  .closePath()
+context.beginPath() // start recording our pen's moves.
+  .moveTo(0, 0)
+  .lineTo(10, 0)
+   .lineTo(10, 40)
+   .closePath()
    .fill({ fill: 'yellow' });
 // Create a stave of width 400 at position 10, 40 on the canvas.