Ответы пользователя по тегу Canvas
  • Как реализовать интерактивную карту с зумом?

    VoidVolker
    @VoidVolker
    Dark side eye. А у нас печеньки! А у вас?
    Ответ написан
    Комментировать
  • Как расставить точки на конкретных (заранее есть массив с координатами) координатах?

    VoidVolker
    @VoidVolker Куратор тега JavaScript
    Dark side eye. А у нас печеньки! А у вас?
    При движении мышкой сравнивать текущие координаты курсора с координатам точек и при наведении на точку показывать нужное окошко.
    Ответ написан
    6 комментариев
  • Как задать свои минимальные значения от которых начнётся Canvas?

    VoidVolker
    @VoidVolker Куратор тега JavaScript
    Dark side eye. А у нас печеньки! А у вас?
    Очень просто: использовать масштабирование и т.н. "плавающее окно". Делать канвас больше размера окна нет смысла - все равно не будет ничего рендериться, а производительность упадет. На канвасе отображать только то, что видно пользователю в его масштабе. Например, у пользователя окно 1000*500 и канвас такой же. Пытаться рендерить на канвасе больше точек, чем там есть пикселей нет никакого смысла. Вместо этого строится новый график с новыми точкам в соответствии с масштабом. Все, что за пределами видимого - не рендерится и не считается. Для ускорения прокрутки делается расчет графика на двойной или тройной размер экрана - т.е. экран или половина слева и так же справа, а рендерится середина. Т.о., можно сделать плавную и красивую прокрутку без тормозов на новый расчёт графика по 20 раз в секунду.
    Ответ написан
    Комментировать
  • Как при работе с Canvas разделить код на модули?

    VoidVolker
    @VoidVolker
    Dark side eye. А у нас печеньки! А у вас?
    Точно так же, как и без канваса. Берете свою задачу и делаете декомпозицию на более простые задачи/подзадачи/модули и повторяете пока не достигнете какого-то простого размера задачи. Т.е., не условно "ударить мечом и нанести урон", а переместить объект Х в точку Y, проверить на попадание по цели, вычислить урон, показать урон на экране, изменить состояние целевого объекта. Ну а далее организуете все это в модули: например группы связанных простейшие задач организуются в класс, а сами задачи - в методы. Из классов выстраивается логическая структура вашей задачи. Например: класс "ударить мечом", в котором используется класс "объект типа меч", а в классе объекта используется метод "переместить объект".
    Ответ написан
  • 2 Изображения на 1 холсте?

    VoidVolker
    @VoidVolker
    Dark side eye. А у нас печеньки! А у вас?
    Точно так же загрузить и отрисовать в нужных координатах.
    Ответ написан
    Комментировать
  • Как лучше реализовать анимацию в js/canvas?

    VoidVolker
    @VoidVolker Куратор тега JavaScript
    Dark side eye. А у нас печеньки! А у вас?
    Анимация привязывается ко времени, а не к шагу. Каждый фрейм анимации может длиться любое количество времени. Поэтому, надо каждый фрейм не прибавлять 1 px, а проверить сколько прошло времени с предыдущего фрейма и вычислить новое положение объекта в пространстве.
    Ответ написан
    Комментировать
  • Как реализовать похожее на сайте?

    VoidVolker
    @VoidVolker Куратор тега JavaScript
    Dark side eye. А у нас печеньки! А у вас?
    Проще всего взять и открыть исходный код сайта и посмотреть как там сделано — картинка фоном и сверху элементы с числами. Всего-то два клика.
    Ответ написан
  • Какую библиотеку использовать для отрисовки графиков?

    VoidVolker
    @VoidVolker Куратор тега JavaScript
    Dark side eye. А у нас печеньки! А у вас?
    Если объем отображаемых данных небольшой(менее 100 точек), то можно использовать SVG библиотеки (я например использовал C3.js - очень юзабельная либа, оcнована на D3). Если же точек много - то лучше выбирать графики с отрисовкой в CANVAS.
    Ответ написан
    Комментировать