Сгенерированное фоновое изображение с помощью CSS или Canvas

Question

Недавно нашли это изображение:

Оригинальный размер изображения превышает 2 МБ.

Я хочу установить на фоне моего проекта нечто подобное.

Интересно, можно ли создать что-то подобное без какого-либо изображения, но с помощью новых веб-технологий, таких как CSS3, HTML5 Canvas ... или что-то в этом роде?

Если нет, то как можноУменьшить размер, не касаясь ширины и высоты изображения?это возможно?

Answer 1

С холстом это абсолютно возможно.

См .: http://js1k.com/2011-dysentery/demo/955

http://js1k.com/2010-first/demo/171

http://js1k.com/2011-dysentery/demo/993

Существует также эта система частиц: http://www.mrspeaker.net/dev/parcycle/

Answer 2

1) Да, вы можете нарисовать что-то похожее с Canvas (вопрос поиска правильных процедур) и даже применить его в качестве фона CSS, используя Canvas.toDataURL ()

background: url(<string_from_toDataURL>)

2) Если на этом изображении много повторяющихся паттернов, вы можете попробовать сохранить его как 8-битный PNG.Если у вас Windows irfan view, есть хорошая возможность уменьшить глубину цвета.

Answer 3

Вы можете создать элемент SVG или холст, заполнить его желаемым шаблоном, установить его размер на width:100%;height:100%;position:absolute; и индекс на z-index:-1;, чтобы подтолкнуть его позади вашего контента.Вы не можете создать изображение с помощью CSS3, так как CSS3 позволит вам только вставить URL (img или data:// url) (см. http://www.w3.org/TR/css3-background/#backgrounds).

Чтобы создать подобное изображение с помощью canvas, вы должны изучитьЧто касается холстовых примитивов, вы можете получить очень простой результат с fillRect. То же самое для SVG, хотя оба не очень хорошо поддерживаются в версиях браузера последнего поколения. Возможно, вы захотите создать свой img сервером и использоватьСвойство CSS background:;.