「VexFlow 連符」の版間の差分
(ページの作成:「== '''概要''' == 連符を描いてみたいと思います。tupletというのが連符のキーワードになります。 <div id="output"></div> (function(){ // This approach to importing classes works in CJS contexts (i.e., a regular <script src="..."> tag). const { Stave, StaveNote, Beam, Formatter, Renderer } = Vex; // Create an SVG renderer and attach it to the DIV element with id="output". const div = document.getElementById("output"); const render…」) |
編集の要約なし |
||
| 4行目: | 4行目: | ||
<div id="output"></div> | <div id="output"></div> | ||
<yjavascript></script> | |||
<script> | |||
(function(){ | (function(){ | ||
// This approach to importing classes works in CJS contexts (i.e., a regular <script src="..."> tag). | // This approach to importing classes works in CJS contexts (i.e., a regular <script src="..."> tag). | ||
| 44行目: | 46行目: | ||
beam1.setContext(context).draw(); | beam1.setContext(context).draw(); | ||
beam2.setContext(context).draw(); | beam2.setContext(context).draw(); | ||
}(); | }(); | ||
</javascript> | |||
2022年12月16日 (金) 19:54時点における版
概要
連符を描いてみたいと思います。tupletというのが連符のキーワードになります。
<yjavascript></script> <script> (function(){ // This approach to importing classes works in CJS contexts (i.e., a regular <script src="..."> tag). const { Stave, StaveNote, Beam, Formatter, Renderer } = Vex;
// 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(720, 130); const context = renderer.getContext();
// Measure 1 const staveMeasure1 = new Stave(10, 0, 300); staveMeasure1.addClef("treble").setContext(context).draw();
const notesMeasure1 = [new StaveNote({ keys: ["c/4"], duration: "q" }), new StaveNote({ keys: ["d/4"], duration: "q" }), new StaveNote({ keys: ["b/4"], duration: "qr" }), new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q" })];
// Helper function to justify and draw a 4/4 voice Formatter.FormatAndDraw(context, staveMeasure1, notesMeasure1);
// Measure 2 - second measure is placed adjacent to first measure. const staveMeasure2 = new Stave(staveMeasure1.width + staveMeasure1.x, 0, 400);
const notesMeasure2_part1 = [new StaveNote({ keys: ["c/4"], duration: "8" }), new StaveNote({ keys: ["d/4"], duration: "8" }), new StaveNote({ keys: ["b/4"], duration: "8" }), new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "8" })];
const notesMeasure2_part2 = [new StaveNote({ keys: ["c/4"], duration: "8" }), new StaveNote({ keys: ["d/4"], duration: "8" }), new StaveNote({ keys: ["b/4"], duration: "8" }), new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "8" })];
// Create the beams for 8th notes in second measure. const beam1 = new Beam(notesMeasure2_part1); const beam2 = new Beam(notesMeasure2_part2);
const notesMeasure2 = notesMeasure2_part1.concat(notesMeasure2_part2);
staveMeasure2.setContext(context).draw(); Formatter.FormatAndDraw(context, staveMeasure2, notesMeasure2);
// Render beams beam1.setContext(context).draw(); beam2.setContext(context).draw();
}(); </javascript>