「VexFlow タブ譜 ミュート」の版間の差分
編集の要約なし |
|||
484行目: | 484行目: | ||
ctx.strokeStyle = defaultStyle.strokeStyle; | ctx.strokeStyle = defaultStyle.strokeStyle; | ||
const | const Vocal_St1 = new VF.Stave(80, 30, nHeadMargin + nStaveWidth).setContext(ctx); | ||
Vocal_St1.setClef("treble").setContext(ctx); | |||
Vocal_St1.setTimeSignature('4/4').setContext(ctx); | |||
Vocal_St1.addKeySignature('D').setContext(ctx); | |||
Vocal_St1.setMeasure(1); | |||
Vocal_St1.draw(); | |||
Vocal.x = | Vocal.x = Vocal_St1.x - 30; | ||
Vocal.y = | Vocal.y = Vocal_St1.y + 90; | ||
const | const Vocal_St2 = f.Stave({ x: Vocal_St1.width + Vocal_St1.x, y: Vocal_St1.y, width: nStaveWidth }); | ||
VocalSt2.setMeasure(2); | VocalSt2.setMeasure(2); | ||
VocalSt2.setContext(ctx).draw(); | VocalSt2.setContext(ctx).draw(); | ||
const | const Vocal_St3 = new VF.Stave(Vocal_St2.width + Vocal_St2.x, Vocal_St1.y, nStaveWidth).setContext(ctx); | ||
Vocal_St3.setMeasure(3); | |||
Vocal_St3.draw(); | |||
const | const Vocal_St4 = new VF.Stave(Vocal_St3.width + Vocal_St3.x, Vocal_St1.y, nStaveWidth).setContext(ctx); | ||
Vocal_St4.setMeasure(4); | |||
Vocal_St4.draw(); | |||
const | const Guitar1_St1 = new VF.Stave(Vocal_St1.x, Vocal_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx); | ||
Guitar1_St1.addClef("treble").setContext(ctx); | |||
Guitar1_St1.addTimeSignature('4/4').setContext(ctx); | |||
Guitar1_St1.addKeySignature('D').setContext(ctx); | |||
Guitar1_St1.draw(); | |||
const | const Guitar1_St2 = new VF.Stave(Guitar1_St1.width + Guitar1_St1.x, Guitar1_St1.y, nStaveWidth).setContext(ctx); | ||
Guitar1_St2.draw(); | |||
const | const Guitar1_St3 = new VF.Stave(Guitar1_St2.width + Guitar1_St2.x, Guitar1_St1.y, nStaveWidth).setContext(ctx); | ||
Guitar1St3.draw(); | Guitar1St3.draw(); | ||
const | const Guitar1_St4 = new VF.Stave(Guitar1_St3.width + Guitar1_St3.x, Guitar1_St1.y, nStaveWidth).setContext(ctx); | ||
Guitar1_St4.draw(); | |||
const Guitar1_tab1 = new VF.Stave( | const Guitar1_tab1 = new VF.Stave(Guitar1_St1.x, Guitar1_St1.y + 110, nHeadMargin + nStaveWidth).setContext(ctx); | ||
for (var i = 0; i < 5; i++) { | for (var i = 0; i < 5; i++) { | ||
if (i == 0) continue; | if (i == 0) continue; | ||
549行目: | 549行目: | ||
Guitar1_tab4.draw(); | Guitar1_tab4.draw(); | ||
const Guitar1_Tab1 = new VF.Stave( | const Guitar1_Tab1 = new VF.Stave(Guitar1_St1.x, Guitar1_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx); | ||
Guitar1_Tab1.draw(); | Guitar1_Tab1.draw(); | ||
555行目: | 555行目: | ||
Stave9Pos.y = Guitar1_Tab1.y; | Stave9Pos.y = Guitar1_Tab1.y; | ||
var connector9_2 = new VF.StaveConnector( | var connector9_2 = new VF.StaveConnector(Guitar1_St1, Guitar1_Tab1); | ||
connector9_2.setType(VF.StaveConnector.type.BRACKET); | connector9_2.setType(VF.StaveConnector.type.BRACKET); | ||
connector9_2.setContext(ctx); | connector9_2.setContext(ctx); | ||
connector9_2.draw(); | connector9_2.draw(); | ||
Guitar1Inst.x = | Guitar1Inst.x = Vocal_St1.x - 30; | ||
Guitar1Inst.y = | Guitar1Inst.y = Guitar1_St1.y + ((Guitar1_Tab1.y - Guitar1_St1.y) / 2) + 90; | ||
const Guitar1_Tab1_1 = new VF.Stave(Guitar1_Tab1.x + nHeadMargin + 20, Guitar1_Tab1.y, 0).setContext(ctx); | const Guitar1_Tab1_1 = new VF.Stave(Guitar1_Tab1.x + nHeadMargin + 20, Guitar1_Tab1.y, 0).setContext(ctx); | ||
803行目: | 803行目: | ||
PercInst.y = Perc_St1.y + 90; | PercInst.y = Perc_St1.y + 90; | ||
var AllConnector = new VF.StaveConnector( | var AllConnector = new VF.StaveConnector(Vocal_St1, Perc_St1); | ||
AllConnector.setType(VF.StaveConnector.type.SINGLE); | AllConnector.setType(VF.StaveConnector.type.SINGLE); | ||
AllConnector.setContext(ctx); | AllConnector.setContext(ctx); |
2024年4月17日 (水) 22:45時点における版
VexFlow 使い方に戻る。
概要
タブ譜 ミュート
コードは以下のとおりです。
<div id="yonet202404Mid_Output01"></div>
<script>
VexFlow 使い方に戻る。