Beams #1660
Description
`
<title>Аккорды для ударных инструментов</title> <style> body { font-family: Arial, sans-serif; } #container { width: 600px; height: 200px; margin: auto; border: 1px solid black; padding: 10px; background-color: white; } </style> <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/cjs/vexflow.min.js"></script> <script type="text/javascript"> document.addEventListener("DOMContentLoaded", function(event) { const div = document.getElementById("container"); const renderer = new VexFlow.Renderer(div, VexFlow.Renderer.Backends.SVG); renderer.resize(600, 200); const stave = new VexFlow.Stave(30, 40, 500); stave.addClef("percussion"); stave.setContext(renderer.getContext()); stave.draw(); // Создание нот с отключенными автоматическими балками const notes = [ new VexFlow.StaveNote({ keys: ['f/5/x'], duration: '8' }), new VexFlow.StaveNote({ keys: ['f/5/x'], duration: '8'}), new VexFlow.StaveNote({ keys: ['f/5/x'], duration: '8'}), new VexFlow.StaveNote({ keys: ['f/5/x'], duration: '8'}), new VexFlow.StaveNote({ keys: ['f/5/x'], duration: '8'}), new VexFlow.StaveNote({ keys: ['f/5/x'], duration: '8'}), new VexFlow.StaveNote({ keys: ['f/5/x'], duration: '8'}), new VexFlow.StaveNote({ keys: ['f/5/x'], duration: '8'}) ]; // Установить направление штилей вверх notes.forEach(note => note.setStemDirection(VexFlow.Stem.UP)); // Создать голос и отформатировать const voice = new VexFlow.Voice({ beats: 4, beatType: 4 }); voice.addTickables(notes); const formatter = new VexFlow.Formatter(); formatter.joinVoices([voice]); formatter.formatToStave([voice], stave); voice.draw(renderer.getContext(), stave); // Создание балок для объединения нот // Первая балка для первых двух восьмых нот const beam1 = new VexFlow.Beam(notes.slice(0, 2)); // Вторая балка для следующих четырех восьмых нот const beam2 = new VexFlow.Beam(notes.slice(2, 6)); // Третья балка для последних двух восьмых нот const beam3 = new VexFlow.Beam(notes.slice(6, 8)); // Отрисовка балок beam1.setContext(renderer.getContext()).draw(); beam2.setContext(renderer.getContext()).draw(); beam3.setContext(renderer.getContext()).draw(); }); </script> `P