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

Question

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

Это не простой шаблон для создания с помощью canvas, но, насколько я знаю, это возможно. Вот как это выглядит.

Мне лучше сделать несколько изображений одного и того же шаблона, или это фоновое изображение легко воссоздать на холсте? Если это подходит для холста, как я могу воссоздать его в различных размерах? Хотелось бы знать, как начать что-то подобное, используя canvas, но это выше моего уровня навыков.

Answer 1

Я здесь преобразовал вашу форму в форму SVG: https://gist.github.com/1321653 - используйте ее как хотите.

Согласно caniuse.com , SVG - этоподдерживается во всех распространенных браузерах, кроме IE8 и более ранних.

Для IE8 и более ранних версий вы можете комбинировать canvg , библиотеку SVG-to-canvas, с explorercanvas , эмулятор холста для IE8 и более ранних версий.Или вы можете отобразить прямоугольник с цветом фона - пользователи IE могут не пропустить сплат.

Редактировать : Вы также можете проявить креативность с помощью CSS3-градиентов фона, ala http://www.ecsspert.com/(известные логотипы, созданные только с CSS), но совместимость между браузерами низкая.