「VexFlow 入門その1」の版間の差分
編集の要約なし |
(→概要) |
||
| 3行目: | 3行目: | ||
<div id="output"></div> | <div id="output"></div> | ||
スクリプトは以下のとおり。 | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
| 30行目: | 33行目: | ||
stave.setContext(context).draw(); | stave.setContext(context).draw(); | ||
</script> | </script> | ||
</syntaxhighlight> | |||
最初に、div に 出力するタグを取得する。ここでは>div id="output"<>/div<のタグ全体要素を取得している。 | |||
<yjavascript></script> | <yjavascript></script> | ||
<script src="https://wiki.yo-net.jp/vexflow/build/cjs/vexflow.js"></script> | <script src="https://wiki.yo-net.jp/vexflow/build/cjs/vexflow.js"></script> | ||
2022年12月12日 (月) 21:49時点における版
概要
ひとつひとつの構成要素を知る前に入門用の楽譜をいくつか描いて全貌をつかもうとするのが最初です。五線譜を描いてみます。
スクリプトは以下のとおり。
<div id="output"></div>
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const {
Renderer,
Stave
} = Vex.Flow;
// Create an SVG renderer and attach it to the DIV element named "boo".
const div = document.getElementById('output');
const renderer = new Renderer(div, Renderer.Backends.SVG);
// Configure the rendering context.
renderer.resize(500, 200);
const context = renderer.getContext();
// Create a stave of width 400 at position 10, 40 on the canvas.
const stave = new Stave(10, 40, 400);
// Add a clef and time signature.
stave.addClef('treble').addTimeSignature('4/4');
// Connect it to the rendering context and draw!
stave.setContext(context).draw();
</script>
最初に、div に 出力するタグを取得する。ここでは>div id="output"<>/div<のタグ全体要素を取得している。