Воспроизведение кривых звукового фильтра в холсте html5

Question

Если бы я хотел запрограммировать кривые различных звуковых фильтров, какие инструменты я должен использовать для их создания в холсте?

http://raider.mountunion.edu/~miskeljp/ds/resources/filters/filter_types.jpg

Мои идеи:

• quadraticCurveTo
• bezierCurveTo
• пользовательских кривой с использованием Math.sin

Поскольку я все еще не хватает опыта, я надеюсь, что кто-то мог скажите мне, какой будет лучший aproach.

Answer 1

Квадратичные, безьевые и синусоидальные кривые не будут хорошо соответствовать кривой фильтра. Их можно спорить, но я не рекомендую.

Если эти кривые должны быть динамическими, я рекомендую найти фактические функции для фильтров и использовать lineTo (x, y) столько раз, сколько вы сочтете нужным.

Если у вас есть математическая функция, запрограммированная в javascript-функцию, вы можете сделать следующее.

context.beginPath(); 
for(var i = startX; i<endX; i++) 
    context.lineTo(i, myCurve(i)); 
context.lineWidth = 5; 
context.strokeStyle = 'black'; 
context.stroke(); 

Единственная причина, по которой это не делается, заключается в том, что вы беспокоитесь о проблемах с производительностью или о том, что ваш холст очень большой.

Если это так, вероятно, вы должны использовать предварительно вычисленную кривую. Кривые Безье хорошо работают для такого рода работ.

Если вам нужна динамика кривой и у вас есть вышеупомянутые проблемы с производительностью, вам нужно найти математика и выяснить, как сопоставить независимые функции кривым Безье. Это можно сделать, но для этого требуется довольно много алгебры.