Как и с помощью чего можно нарисовать градиент на основе синуса?

Question

[bpGusar]

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


Вершин на графике стало больше.

Задача состоит в том, что бы нарисовать градиент на основе этого графика.

Как такое можно реализовать?

Должно выглядеть примерно вот так


Буду благодарен за любую помощь!

Answer 1

[RAX7]

https://developer.mozilla.org/ru/docs/Web/API/Canv...
https://developer.mozilla.org/en-US/docs/Web/API/C...

Comments

[bpGusar]

как можно повернуть всё это на 90 градусов? гуглил и наткнулся на patternCtx.rotate(angle), но он почему то не работает, мб я что то не так делаю. нужно что б было вертикально.

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

[RAX7]

bpGusar, поправил, так?

[bpGusar]

RAX7, почти так. от центра, имелось ввиду что б не черная линия была в центре а сам градиент. извини за недопонимание.

[RAX7]

bpGusar,

pattern.setTransform(new DOMMatrix([1, 0, 0, 1, 0, (canvas.height - period) / 2]));

[bpGusar]

RAX7, ты просто спас мне еще неделю работы. спасибо!

[RAX7]

bpGusar, пожалуйста =)

Answer 2

[lamer350]