「VexFlow 音符」の版間の差分
(→音符の種類) |
(→音符の種類) |
||
| 26行目: | 26行目: | ||
const f = new Factory({ renderer: { elementId: 'yonet202302_Output01', width: 1500, height: 195 } }); | const f = new Factory({ renderer: { elementId: 'yonet202302_Output01', width: 1500, height: 195 } }); | ||
const ctx = f.getContext(); | const ctx = f.getContext(); | ||
const stave1 = new Stave(10, 50, | const stave1 = new Stave(10, 50, 350).setContext(ctx).draw(); | ||
stave1.addClef("treble").setContext(ctx).draw(); | stave1.addClef("treble").setContext(ctx).draw(); | ||
stave1.addTimeSignature('C').setContext(ctx).draw(); | stave1.addTimeSignature('C').setContext(ctx).draw(); | ||
| 37行目: | 37行目: | ||
const stave2 = new Stave( | const stave2 = new Stave(360, 50, 350).setContext(ctx).draw(); | ||
const notes2 = [ | const notes2 = [ | ||
| 47行目: | 47行目: | ||
Formatter.FormatAndDraw(ctx, stave2, notes2); | Formatter.FormatAndDraw(ctx, stave2, notes2); | ||
const stave3 = new Stave(710, 50, | const stave3 = new Stave(710, 50, 450).setContext(ctx).draw(); | ||
const notes3 = [ | const notes3 = [ | ||
2023年2月9日 (木) 18:30時点における版
VexFlow 使い方に戻る。
概要
音符を記述するまでにその土台となる楽譜の構造を知らなければならなかったので、遅くなりましたが、ようやっと本文をえがけるようになるという感じです。ただし、音符も構成要素は複雑なので、ここではシンプルな音符の機能のみを紹介したいと思います。旗同士を繋ぐ連桁(れんこう：英 Beem ビーム)、連符や休符については別の項目で記します。この先の3つあたりまで把握できてやっと音を記録する楽譜というものが構成できるようになります。あと３つ先までは音符の範疇。ここでは、その一部しか紹介しないことに注意しておいて下さい。
音符の種類
小節において何拍分を鳴らすかの違いで音符の種類が異なります。まずは、種類について見てみましょう。
VexFlow 使い方に戻る。