Градиент кривой Безье в html5/css3

Не похоже, что он может выполнять градиент css3 с нелинейным (например, безье); кто-нибудь знает, возможно ли это в html5 холсте?

Ответы

Ответ 1

Я думаю, что исходный комментарий действительно касается скорости прогрессирования от одного цвета к другому в градиенте, а не от физической формы градиента.

Чтобы обратиться к первому: нет, к сожалению, в настоящее время нет возможности выполнять нелинейные заполнения градиента CSS. Тем не менее, вы можете использовать последовательные остановки цвета для достижения определенного уровня контроля над формой вашего градиента.

Вы можете столкнуться с маленькими квадратами под градиентом в генераторе градиента Colorzilla или прочитать статья линейного градиента MDN для получения подробной информации о создании собственных цветовых остановок.

Прекращение цвета можно использовать довольно творчески, особенно в сочетании с background-size. Вот большой набор шаблонов CSS, построенный с использованием градиентов.

Препроцессоры CSS также могут использоваться для генерации градиентов, которые чувствуют нелинейность (хотя они просто создают множество остановок, не задумываясь о каждом). Недавняя статья CSS Tricks об ослаблении линейных градиентов демонстрирует один такой подход.