「VexFlow 入門その1」の版間の差分
編集の要約なし |
(→概要) |
||
| 6行目: | 6行目: | ||
<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> | ||
<script> | <script> | ||
const { Renderer, Stave } = Vex.Flow; | const { | ||
Renderer, | |||
Stave | |||
} = Vex.Flow; | |||
// Create an SVG renderer and attach it to the DIV element named "boo". | // Create an SVG renderer and attach it to the DIV element named "boo". | ||
const div = document.getElementById( | const div = document.getElementById('output'); | ||
const renderer = new Renderer(div, Renderer.Backends.SVG); | const renderer = new Renderer(div, Renderer.Backends.SVG); | ||
| 15行目: | 18行目: | ||
renderer.resize(500, 500); | renderer.resize(500, 500); | ||
const context = renderer.getContext(); | 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(); | |||
</yjavascript> | </yjavascript> | ||
2022年12月12日 (月) 18:40時点における版
概要
ひとつひとつの構成要素を知る前に入門用の楽譜をいくつか描いて全貌をつかもうとするのが最初です。