Большинство тех, кто начинает изучать программирование, начали это из-за желания сделать свою игру. Нууу… я не исключение, но судьба меня занесла в веб разработку.
Рубрика «canvas» - 2
PIXI.js создание кликера
2020-06-14 в 9:40, admin, рубрики: canvas, css, Gamedev, html, javascript, pixi.js
Памятка по работе с Canvas API
2020-05-10 в 9:12, admin, рубрики: canvas, canvas api, graphics, javascript, visualization, визуализация, графика, Программирование, разработка, Разработка веб-сайтов, холст
Доброго времени суток, друзья!
Данная статья представляет собой небольшую подборку примеров работы с Canvas API, к которой удобно обращаться при необходимости вспомнить изученный материал.
Это не руководство по работе с холстом, а лишь демонстрация некоторых из его основных инструментов.
Для меня это также своего рода промежуточный итог в изучении холста.
Код разбит на отдельные блоки-песочницы, которые для удобства чтения помещены под «кат».
Парочка важных моментов.
Ширину и высоту холста лучше определять с помощью атрибутов:
<canvas width="300" height="300"></canvas>
Если мы хотим, чтобы холстом была вся область просмотра, то делаем следующее:
const width = canvas.width = innerWidth
const height = canvas.height = innerHeight
Холст и двумерный контекст рисования я определяю следующим образом:
const canvas = document.querySelector('canvas')
// не путать с объектом jQuery
const $ = canvas.getContext('2d')
Довольно слов.
Читать полностью »
Имитация рисования от руки на примере RoughJS
2020-05-04 в 4:45, admin, рубрики: canvas, javascript, svg, библиотека javascript, библиотеки js, векторная графика, обработка изображений, Работа с векторной графикой, штриховкаRoughJS это маленькая (<9 КБ) графическая библиотека JavaScript, позволяющая рисовать в эскизном, рукописном стиле. Она позволяет рисовать на <canvas> и с помощью SVG. В этом посте я хочу ответить на самый популярный вопрос о RoughJS: как это работает?
Немного истории
Очарованный изображениями рукописных графиков, схем и эскизов, я, как истинный нерд, задался вопросом: можно ли создавать такие рисунки с помощью кода, как можно точнее имитировать рисунок от руки, в то же время сохранив возможность программной реализации? Я решил сосредоточиться на примитивах — линиях, многоугольниках, эллипсах и кривых, чтобы создать целую библиотеку 2D-графики. На её основе можно создавать библиотеки и графики для рисования графиков и схем.
Вкратце изучив вопрос, я нашёл статью Джо Вуда и его коллег под названием Sketchy rendering for information visualization. Описанные в ней техники стали основой библиотеки, особенно в рисовании линий и эллипсов.
В 2017 году я написал первую версию библиотеки, которая работала только на Canvas. Решив задачу, я потерял к ней интерес. Год спустя я много работал с SVG, и решил адаптировать RoughJS для работы с SVG. Также я изменил структуру API, сделав её более простой, и сосредоточился на простых векторных графических примитивах. Я рассказал о версии 2.0 на Hacker News и внезапно она обрела огромную популярность. В 2018 году это был второй по популярности пост ShowHN.
Читать полностью »
Пишем Pixel Art Maker на чистом JavaScript
2020-04-06 в 6:17, admin, рубрики: canvas, javascript, pixel, pixel-art, pixelart, Программирование, разработка, Разработка веб-сайтов, холст
Доброго времени суток, друзья!
Предисловие
Однажды веб серфинг привел меня к этому.
Позже обнаружил статью про то, как это работает.
Казалось бы, ничего особенного — Пикачу, нарисованный средствами CSS. Данная техника называется Pixel Art (пиксельное искусство?). Что меня поразило, так это трудоемкость процесса. Каждая клеточка раскрашивается вручную (ну, почти; благо существуют препроцессоры; Sass в данном случае). Конечно, красота требует жертв. Однако разработчик — существо ленивое. Посему я задумался об автоматизации. Так появилось то, что я назвал Pixel Art Maker.
Читать полностью »
Персональный Лас-Вегас, или игра в браузерном расширении
2020-04-04 в 14:02, admin, рубрики: canvas, javascript, игры, карточные игры, продвижение игр, разработка игр, расширение Firefox, расширения chrome, расширения браузеров, Расширения для браузеров
Недавно у нас с другом зашел разговор о карточных играх. Он сказал, что умеет играть только в покер, но и то давно этого не делал, потому что забыл все комбинации. Вот и поговорили… Я вспомнил, что пару лет назад я написал пять карточных игр, включая покер Техасский Холдем, где в любой момент в процессе игры можно посмотреть не только собранные комбинации, но и все потенциально возможные варианты с еще не открытыми картами. Это вполне могло бы стать обучающим пособием и помочь освежить в памяти правила в процессе игры с ботами.
Я решил заняться рефакторингом своего старого кода, а также, подправить графику. Дизайн мне всегда давался с трудом, это не мое. Рассчитывая хоть на какое-то вдохновение, я включил саунд-трек из GTA San-Andreas, тот, что с кантри-музыкой, с радио K-Rose. Мне кажется, что он хорошо передает атмосферу Лас-Вегаса. Я там никогда не был, но точно передает! Клянусь своей звездой шерифа. (Если что — она пластиковая, так что, не жалко...) И даже не поленился зайти в саму легендарную игру и прокатиться по Лас-Вентурасу, виртуальному прототипу мировой игорной столицы.
Читать полностью »
Один ранимый, глупый, мечтательный верстальщик решил стать программистом и у него ничего не вышло… Но он не бросил программировать и решил начать с малых программ…
Это лучшее описание, которое я мог придумать. Именно с это целью я начал писать простенькие программы чтобы отточить свои навыки, познакомиться с новыми конструкциями в привычном мне языке и если честно, то это даже стало приносить мне удовольствие.
Если у вас мало опыта разработки, то статья будет полезной, а если у вас уже есть опыта разработки, то потратьте время на что-то более стоящее.
Это не обучение. Больше похоже на блог.
Была цель сделать 3 версии игры крестики нолики.
1 — Самое простое(без красивого визуала, с помощью DOM)
2 — Дать возможность играть вдвоем(один компьютер)
3 — Перенести все это в canvas
Описывать крестики-нолики я не буду, надеюсь, все знают принцип игры. Все полезные ссылки(репозиторий, документация) будут в конце статьи.
Что из этого вышло? Хм…
Читать полностью »
Leaflet. Дружим Image с Canvas
2020-01-30 в 13:16, admin, рубрики: canvas, javascript, Leaflet, Maps API, Разработка веб-сайтов
Доброго времени суток, дорогие хабрахабровцы!
Leaflet — библиотека, позволяющая добавить интерактивные карты на Ваш сайт и легко их кастомизировать. Сегодня рассмотрим то, как можно разместить изображения на Canvas-слое карт, совместно с базовыми маркерами.
Читать полностью »
Реализуем визуальный эффект из фильма «Матрица»
2020-01-25 в 5:18, admin, рубрики: animation, canvas, javascript, matrix, Программирование, Разработка веб-сайтов, холст
Доброго времени суток, друзья!
На днях пересмотрел «Матрицу». Слушайте, до чего же классный фильм (это касается только первой части). В очередной раз обратил внимание на «падающие» строчки с иероглифами на ихних экранах. Задумался о том, как это можно реализовать… максимально простым способом (ибо лень). Вот что у меня получилось.
Читать полностью »
Обзор WCS 5.2 — WebRTC сервера для веб-разработчиков онлайн трансляций и видеочатов
2020-01-06 в 15:31, admin, рубрики: android, Android sdk, canvas, CDN, ffmpeg, FPS фильтр, HLS, iOS, iOS SDK, ip camera, javascript api, obs, rest api, rtmp, rtsp, screen sharing, SIP-конференции, SIP/RTP, STUN/TURN серверы, VoD, VOD LIVE, VR-плеер, WCS, WebRTC, wirecast, Блог компании Flashphoner, видеоконференцсвязь, водяной знак, микшер, поворот картинки, Программирование, Работа с видео, Разработка веб-сайтов, сеть обработки контента, транскодирование потока
Алиса — опытный фулл-стек разработчик и способна за неделю написать каркас SAAS проекта на своем любимом фреймворке с использованием php. На фронтенде предпочитает Vue.js.
В телеграмм стучится заказчик, которому во что бы то ни стало надо разработать веб-сайт, который будет местом встречи работодателя и сотрудника для проведения очного интервью. Очного — означает глаза в глаза, прямого видео контакта в реальном времени с видео и голосом.
«Почему не скайп?» — спросите вы. Так уж повелось, что серьезные проекты, а каждый стартап, несомненно, себя таковым считает, стараются предложить внутренний сервис коммуникаций по самым разным причинам, среди которых:Читать полностью »
Кнопки нестандартной формы в Unity UI
2019-12-04 в 12:35, admin, рубрики: button, canvas, image, sprite, unity, unity ui, unity3d, unity3d урокиНедавно у меня возникла необходимость использовать в своем проекте кнопки нестандартной формы. Однако эта на первый взгляд тривиальная задача вызвала у меня некоторые затруднения.
Проблема заключается в том, что стандартная кнопка UI обрабатывает нажатия даже по прозрачным областям, что в данном случае совсем не желательно. При этом у самого компонента Button нет никаких (видимых в инспекторе) параметров, которые могли бы отвечать за то, какие области кнопки могли бы обрабатывать наведение/нажатие.
Спустя некоторое время поисков в интернете и курения документации ко мне пришло следующее, при этом довольно простое, решение:
Читать полностью »