「VexFlow タブ譜 ミュート」の版間の差分

提供:yonewiki
編集の要約なし
484行目: 484行目:
ctx.strokeStyle = defaultStyle.strokeStyle;
ctx.strokeStyle = defaultStyle.strokeStyle;


const VocalSt1 = new VF.Stave(80, 30, nHeadMargin + nStaveWidth).setContext(ctx);
const Vocal_St1 = new VF.Stave(80, 30, nHeadMargin + nStaveWidth).setContext(ctx);
VocalSt1.setClef("treble").setContext(ctx);
Vocal_St1.setClef("treble").setContext(ctx);
VocalSt1.setTimeSignature('4/4').setContext(ctx);
Vocal_St1.setTimeSignature('4/4').setContext(ctx);
VocalSt1.addKeySignature('D').setContext(ctx);
Vocal_St1.addKeySignature('D').setContext(ctx);
VocalSt1.setMeasure(1);
Vocal_St1.setMeasure(1);
VocalSt1.draw();
Vocal_St1.draw();


Vocal.x = VocalSt1.x - 30;
Vocal.x = Vocal_St1.x - 30;
Vocal.y = VocalSt1.y + 90;  
Vocal.y = Vocal_St1.y + 90;  


const VocalSt2 = f.Stave({ x: VocalSt1.width + VocalSt1.x, y: VocalSt1.y, width: nStaveWidth });
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 VocalSt3 = new VF.Stave(VocalSt2.width + VocalSt2.x, VocalSt1.y, nStaveWidth).setContext(ctx);
const Vocal_St3 = new VF.Stave(Vocal_St2.width + Vocal_St2.x, Vocal_St1.y, nStaveWidth).setContext(ctx);
VocalSt3.setMeasure(3);
Vocal_St3.setMeasure(3);
VocalSt3.draw();
Vocal_St3.draw();


const VocalSt4 = new VF.Stave(VocalSt3.width + VocalSt3.x, VocalSt1.y, nStaveWidth).setContext(ctx);
const Vocal_St4 = new VF.Stave(Vocal_St3.width + Vocal_St3.x, Vocal_St1.y, nStaveWidth).setContext(ctx);
VocalSt4.setMeasure(4);
Vocal_St4.setMeasure(4);
VocalSt4.draw();
Vocal_St4.draw();


const Guitar1St1 = new VF.Stave(VocalSt1.x, VocalSt1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
const Guitar1_St1 = new VF.Stave(Vocal_St1.x, Vocal_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
Guitar1St1.addClef("treble").setContext(ctx);
Guitar1_St1.addClef("treble").setContext(ctx);
Guitar1St1.addTimeSignature('4/4').setContext(ctx);
Guitar1_St1.addTimeSignature('4/4').setContext(ctx);
Guitar1St1.addKeySignature('D').setContext(ctx);
Guitar1_St1.addKeySignature('D').setContext(ctx);
Guitar1St1.draw();
Guitar1_St1.draw();


const Guitar1St2 = new VF.Stave(Guitar1St1.width + Guitar1St1.x, Guitar1St1.y, nStaveWidth).setContext(ctx);
const Guitar1_St2 = new VF.Stave(Guitar1_St1.width + Guitar1_St1.x, Guitar1_St1.y, nStaveWidth).setContext(ctx);
Guitar1St2.draw();
Guitar1_St2.draw();


const Guitar1St3 = new VF.Stave(Guitar1St2.width + Guitar1St2.x, Guitar1St1.y, nStaveWidth).setContext(ctx);
const Guitar1_St3 = new VF.Stave(Guitar1_St2.width + Guitar1_St2.x, Guitar1_St1.y, nStaveWidth).setContext(ctx);
Guitar1St3.draw();
Guitar1St3.draw();


const Guitar1St4 = new VF.Stave(Guitar1St3.width + Guitar1St3.x, Guitar1St1.y, nStaveWidth).setContext(ctx);
const Guitar1_St4 = new VF.Stave(Guitar1_St3.width + Guitar1_St3.x, Guitar1_St1.y, nStaveWidth).setContext(ctx);
Guitar1St4.draw();
Guitar1_St4.draw();


const Guitar1_tab1 = new VF.Stave(Guitar1St1.x, Guitar1St1.y + 110, nHeadMargin + nStaveWidth).setContext(ctx);
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(Guitar1St1.x, Guitar1St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
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(Guitar1St1, Guitar1_Tab1);
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 = VocalSt1.x - 30;
Guitar1Inst.x = Vocal_St1.x - 30;
Guitar1Inst.y = Guitar1St1.y + ((Guitar1_Tab1.y - Guitar1St1.y) / 2) + 90;  
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(VocalSt1, Perc_St1);
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 使い方に戻る。