Для одного проекта разбирался с convas (+js) Понял что если рисовать js-м дело довольно таки утомительное. Но в процессе пришёл к тому что можно создавать шаблоны для отрисовки а потом оперировать ими. Пришла мысль создать библиотеку таких шаблонов. Хотел услышать от вас уважаемые пользователи форума есть ли у данной идеи перспектива. Особенно в плане практики использования нужно ли вообще будет ли применяться и в каких сферах вэбстроительства. Отрисовка картинки в форме сердца Код (Text): function forma_pazl(ctx,width,height){ ctx.beginPath(); ctx.globalCompositeOperation="destination-in"; ctx.fillStyle ="rgba(10,10,10,255)"; ctx.moveTo(width/2,height/20); ctx.bezierCurveTo(width+width/4, -height/4.5, width+width/14, height-height/4, width/2, height-8); ctx.bezierCurveTo( -width/14, height-height/4,-width/4, -height/4.5, width/2, height/20); ctx.fill(); ctx.globalCompositeOperation="source-over"; ctx.closePath(); }
Почему весь сайт то? Это может быть обработка графических обьектов, анимация, адаптивный дизайн элементов страницы, НТМL5 банеры в общем и тд и тп. Хотя если грамотно использовать микроразметку я думаю и сайт на канве в поиске можно продвинуть. Но не в том соль. Речь о шаблонизации отрисовки на канве. К примеру можно собрать простой скрипт который сделает все графические элементы страницы объёмными за счёт прорисовки линейного градиента по их краям. За счёт универсальности шаблона прорисовки скрипт получится очень маленьким. А чтобы эту функцию не изобретать заново можно её включить в библиотеку. Анимацию увеличения и уменьшения вышеуказанного скрипта можно достичь просто меняя ширину и высоту. Получим пульсирующее сердце. опять же прорисовка разных элементов рисунка на самой конве.
Чувак, все, вот ВСЕ, что ты описал, делается одним движением руки на CSS. Серьезно. А адаптивный дизайн на канве - это уже даже не смешно. На каждом кадре браузера перерисовывать сайт руками? Погляди в спецификацию CSS. Все эти вот отступы, внешние и внутренние, модели отображения, смещения, трансформации, все это вот все, помноженное на каскадирование, селекторы, и прочие вещи, которые глупые малограмотные люди напридумали. Вот теперь прикинь, что твой очень маленький универсальный отрисовщик страницы должен уметь все то же. Ты удивишься, но браузер тоже не воздухом рисует. Он берет твою блочную модель, берет CSS, интерпретирует это все по-своему, и на GD-поверхности вьюпорта рисует элементы. И следит за ними. То бишь, то, что ты решил сделать - это практически браузерный рендеринг поверх юраузерного рендеринга. Но вот вопрос - зачем? кАнва. Через букву А. CANVAS. От английского - холст.
Чтобы закрыть вопрос с кАнвой сделайте нормально функцию последующего редактирования сообщения. Как и 80 % пользователей в хелп лезть и искать там не собираюсь на дворе 2017 год. А по поводу вашего сообщения мой вопрос подразумевает что технологии применяются разумно и там где они действительно нужны. Приведённые примеры просты с целью лёгкого понимания идеи в полном объёме. И ЦЕЛЬЮ вопроса было узнать мнение разработчиков в тех нишах где я не сильно силён. Отдельно по CSS Попробуйте отредактированное изображение с помощью CSS сохранить в indexedDB для дальнейшего использования. Сделайте всеми любимый слайдер из одного изображения для разгрузки начального веса страницы. и тд. и тп. На каждом кадре браузера перерисовывать сайт руками? - это особо понравилось
Хорошо. Вот тебе мое мнение, как разработчика, знающего и JS и Canvas, и написавшего библиотеку для многослойного рендеринга спрайтовой анимации, и использующего связку html5Video+canvas+та самая спрайтовая анимация на динамически генерируемых спрайтах в своем текущем проекте: Шаблоны, адаптивная верстка и отрисовка страницы не относятся к вещам, для которых нужен канвас. Это уже совершенно другая тема. Но на деле, именно DOM-canvas для этого не нужен. Все можно провернуть в оперативке только на JS и виртуальных битмапах. И да, выключай наезд. Тебе напомнить, о чем ты первоначально говорил? О шаблонах, анимации и адаптивной верстке? Тезис про CSS относился именно к этому. 1) Слайдер без канваса делается элементарно. Тег <img> уже изобрели и его src можно менять динамически. Более того, он сам берет на себя логику отрисовки асинхронно загружаемых данных. 2) Одного изображения мало может быть для красивого перелистывания. Нужно минимум три. Основное, левое и правое. И хитрая смена src. Так реализована галерея мобильная у Вконтакте, к примеру. Так делаю галереи я. Канвас нужен для динамической работы с растровой графикой. Вот пусть этим и занимается. Для простого вывода картинок он не нужен, так как тот же img дает в разы больше гибкости. Для отрисовки шаблонов и "адаптивной верстки" он тоже не нужен, так как это все делается на CSS. Да, даже градиентные объемы. Правда, ты с ними опоздал лет на 10. Сейчас такое не юзается. --- Добавлено --- Если тебе снова покажется, что я просто канвас-хейтерок, не понимающий что это, не умеющий пользоваться и, по этому отрицающий, не осознавая, что он говорит, перечитай первый абзац этого поста.
Fell-x27 - спасибо большое за развернутый ответ хоть он и ограничен почему то завязанным нами диалогом но кое какую информацию я почерпнул из него. Именно такой анализ используемых методов от спецов мне и нужен но не только в вышеописанных областях. В том то и дело что интернет проекты разнообразны одни требуют простого отображения другие использования объектов страницы и тд и тп. И да, выключай наезд. - даже не собирался если обидел приношу извинения. Просто хотел натолкнуть на мысль. Понятное дело что в разных ситуациях нужно использовать разные подходы. По этой причине и сформировал свой как оказалось сумбурный вопрос. Меня и интересовало как будет (будет ли вообще) востребована и использована данная библиотека опираясь на опыт практиков? Первый пример использования вы мне указали. jquery тоже начинался с простых методов но позже в нём шаблонизировали тот же слайдер прозрачность и тд и тп. Вот я и хочу собрать информацию чтобы определить направление развития если лень не победит.) И именно возможно ли шаблонизировать хоть частично объёкты и методы указанные пользователями форума. html5Video+canvas связка - очень заинтересовало можно взглянуть на проект? Не в плане слизывания библиотеки а в плане что можно шаблонизировать. Если что извиняюсь за сумбурность конец раб дня.
Опять же, смотря о чем речь. Если для решения задач верстки, то нет, не будет. Как было сказано ранее, с CSS разработка в разы быстрее будет, удобнее и гибче. Если же речь идет о каких-то других задачах, то нужно заведомо определиться со спецификой. Я, например, изначально пилил библиотеку под 2D-игру. Отсюда и растут уши, требующие многослойный рендеринг, работу со спрайтовыми анимациями, и чтобы все это фурычило независимо и могло меняться извне. Однако, применимость либы получилась чуть шире в итоге. Почему не взял готовую? Мне было по фану написать самому подобное. Опыт же. И сегодня jquery уже не нужен и умирает, к слову. Делать Библиотеку-Решающую-Все-Проблемы-На-Свете не имеет смысла. Поставь себе конкретную задачу. Хочется куда-нибудь приткнуть canvas? Напиши фоторедактор простенький. Как на imgur. Очень востребовано может быть. Просто как пример. Главное усвоить простую истину - задача без граничных условий не имеет конечного решения. Если хочешь что-то сделать, а не делать вечно, конкретизируй. Указанная связка используется для отрисовки кастомного видеоплеера с рандомно возникающими вотермарками, рисуемыми поверх кадра. Ссылку опубликовать сейчас не могу. Но если бы и опубликовал, речь идет о платных материалах, к которым у гостей все равно нет доступа. Но я могу ответить на любые вопросы касательно данного механизма и Canvas в целом.
Напиши фоторедактор простенький http://pazlodrom.ru/collage/ Подойдёт? Похабненько конечно но для отработки идей сойдёт. Да и canvas хренов для фоторедакторов. Поставь себе конкретную задачу Вопрос на уровне моего понимания в 2D - играх . При отрисовке вы используете что больше готовые растровые изображения либо рисуете? Объясню конкретно этот вопрос Понятно что оформление кадров состоит из обьектов. Обьекты нужно отрисовывать а это рынок где можно создавать авторские обьекты. Естественно обьекты должны быть максимально адаптируемые. Хотя честно сказать скрестить художника и программиста это ещё тот вариант. Я к примеру хреновый рисовальщик как и дизайнер (да и программист ) и в принципе при разработке приложения мне проще допилить созданное нежели разбираться в цветовых сочетаниях и расположении теней.
Чем же? Полноценная GL-поверхность с богатым API. С возможностью пилить попиксельные операции даже. Пробуй. Если не знаешь, откуда взять для тестов карты спрайтов, юзай гугл.