「VexFlow 連符」の版間の差分

提供：yonewiki
113行目: 113行目:


const notesMeasure2_part1 = [
const notesMeasure2_part1 = [
   new StaveNote({ keys: ["c/4"], duration: "8" }),  
   new StaveNote({ keys: ["G#/5"], duration: "32" }),
   new StaveNote({ keys: ["d/4"], duration: "8" }),  
  new StaveNote({ keys: ["E/5"], duration: "32" }),
   new StaveNote({ keys: ["b/4"], duration: "8" }),  
  new StaveNote({ keys: ["F#/5"], duration: "32" }),
   new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "8" })
  new StaveNote({ keys: ["C#/5"], duration: "32" }),
  new StaveNote({ keys: ["D#/5"], duration: "32" }),
  new StaveNote({ keys: ["A/4"], duration: "32" }),
  new StaveNote({ keys: ["C#/5"], duration: "32" }),  
   new StaveNote({ keys: ["G#/4"], duration: "32" }),  
   new StaveNote({ keys: ["A/4"], duration: "32" }),  
   new StaveNote({ keys: ["C#/5"], duration: "32" }),
  new StaveNote({ keys: ["E/5"], duration: "32" }),  
  new StaveNote({ keys: ["F#/5"], duration: "32" }),
];
];
 
//ドA        レB        ミC# ファD        ソE        ラF# シ(G#→b→G) ドA
//ド(C→#→C#) レD        ミE  ファ(F→#→F#) ソG        ラA  シB        ドC
//ド(Bb→#→B) レ(C→#→C#) ミD  ファ(Eb→#→E) ソ(F→#→F#) ラG  シA        ドB(Bb→#→B)
const notesMeasure2_part2 = [
const notesMeasure2_part2 = [
   new StaveNote({ keys: ["c/4"], duration: "8" }),  
   new StaveNote({ keys: ["G#/5"], duration: "32" }),
   new StaveNote({ keys: ["c/4"], duration: "8" }),  
  new StaveNote({ keys: ["E/5"], duration: "32" }),
   new StaveNote({ keys: ["c/4"], duration: "8" }),  
  new StaveNote({ keys: ["F#/5"], duration: "32" }),
  new StaveNote({ keys: ["C#/5"], duration: "32" }),
  new StaveNote({ keys: ["D#/5"], duration: "32" }),
  new StaveNote({ keys: ["A/4"], duration: "32" }),  
   new StaveNote({ keys: ["C#/5"], duration: "32" }),
  new StaveNote({ keys: ["G#/4"], duration: "32" }),  
   new StaveNote({ keys: ["A/4"], duration: "32" }),
  new StaveNote({ keys: ["C#/5"], duration: "32" }),
  new StaveNote({ keys: ["E/5"], duration: "32" }),
  new StaveNote({ keys: ["F#/5"], duration: "32" }),  
];
];


const notesMeasure2_part3 = [
const notesMeasure2_part3 = [
   new StaveNote({ keys: ["b/4"], duration: "8" }),  
   new StaveNote({ keys: ["G#/5"], duration: "32" }),
   new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "8" })
  new StaveNote({ keys: ["E/5"], duration: "32" }),
  new StaveNote({ keys: ["F#/5"], duration: "32" }),
  new StaveNote({ keys: ["C#/5"], duration: "32" }),
  new StaveNote({ keys: ["D#/5"], duration: "32" }),
  new StaveNote({ keys: ["A/4"], duration: "32" }),
  new StaveNote({ keys: ["C#/5"], duration: "32" }),
  new StaveNote({ keys: ["G#/4"], duration: "32" }),
  new StaveNote({ keys: ["A/4"], duration: "32" }),
  new StaveNote({ keys: ["C#/5"], duration: "32" }),
  new StaveNote({ keys: ["E/5"], duration: "32" }),
  new StaveNote({ keys: ["F#/5"], duration: "32" }),
];
 
const notesMeasure2_part4 = [
  new StaveNote({ keys: ["G#/5"], duration: "32" }),
  new StaveNote({ keys: ["E/5"], duration: "32" }),
  new StaveNote({ keys: ["F#/5"], duration: "32" }),
  new StaveNote({ keys: ["C#/5"], duration: "32" }),  
   new StaveNote({ keys: ["D#/5"], duration: "32" }),
  new StaveNote({ keys: ["A/4"], duration: "32" }),
  new StaveNote({ keys: ["C#/5"], duration: "32" }),
  new StaveNote({ keys: ["G#/4"], duration: "32" }),
  new StaveNote({ keys: ["A/4"], duration: "32" }),
  new StaveNote({ keys: ["C#/5"], duration: "32" }),
  new StaveNote({ keys: ["E/5"], duration: "32" }),
  new StaveNote({ keys: ["F#/5"], duration: "32" }),
];
];


// Create the beams for 8th notes in second measure.
// Create the beams for 8th notes in second measure.
const beam1 = new Beam(notesMeasure2_part1);
const beam1 = new Beam(notesMeasure2_part1);
const tuplet1 = new Tuplet(notesMeasure2_part1);
const beam2 = new Beam(notesMeasure2_part2);
const beam2 = new Beam(notesMeasure2_part2);
const tuplet2 = new Tuplet(notesMeasure2_part2);
const tuplet2 = new Tuplet(notesMeasure2_part2);
const beam3 = new Beam(notesMeasure2_part3);
const beam3 = new Beam(notesMeasure2_part3);
const tuplet3 = new Tuplet(notesMeasure2_part3);
const beam4 = new Beam(notesMeasure2_part3);
const tuplet4 = new Tuplet(notesMeasure2_part4);




const notesMeasure2 = notesMeasure2_part1.concat(notesMeasure2_part2).concat(notesMeasure2_part3);
const notesMeasure2 = notesMeasure2_part1.concat(notesMeasure2_part2).concat(notesMeasure2_part3).concat(notesMeasure2_part4);


staveMeasure2.setContext(context).draw();
staveMeasure2.setContext(context).draw();
146行目: 194行目:
// Render beams
// Render beams
beam1.setContext(context).draw();
beam1.setContext(context).draw();
tuplet1.setContext(context).draw();
beam2.setContext(context).draw();
beam2.setContext(context).draw();
tuplet2.setContext(context).draw();
tuplet2.setContext(context).draw();
beam3.setContext(context).draw();
beam3.setContext(context).draw();
tuplet3.setContext(context).draw();
beam4.setContext(context).draw();
tuplet4.setContext(context).draw();


})();
})();
</yjavascript>
</yjavascript>

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

概要

　連符を描いてみたいと思います。tupletというのが連符のキーワードになります。

3連符

　

12連符

「https://wiki.yo-net.jp/index.php?title=VexFlow_連符&oldid=2480」から取得