5

С канвасом знаком поверхностно -
при первом знакомстве столкнулся с таким гайдом в разрезе работы с vue.js:
Controlling the HTML5 Canvas with Vue.js


Вопросы:

  1. Позволяет ли такой способ работать со слоями канваса - так же как с обычными дом елементами?
    (пока что на практике такого добиться не удалось)

  2. Из понимания, что ответ скорее всего будет 'нет' - вытекает следующий вопрос:
    Какие существуют стратегии с точки зрения подходов написания кода - в разрезе того, если стоит задача иметь 100500 разных слоев, при клике на которые - должны происходить какие то действия?
    Каким образом можно навешивать событие на отдельный слой(со своими индивидуальными координатами)?(учитывая что холст будет только 1 к примеру.)

  3. Если работать без дополнительных библиотек - на какие моменты в первую очередь необходимо обратить внимания - для ускорения и оптимизации работы? (возможно есть какие то режимы например не 2d контекст а WebGl - который будет работать быстрее и т.п.)
4
  • 3
    может поможет ru.stackoverflow.com/a/962780/188366 29 июн 2020 в 21:59
  • 4
    webgl быстрее при наличии видео карты, но рисовать на нем не просто..., хотя смотря что, кое что и не очень сложно 29 июн 2020 в 22:03
  • 1
    А "слои" - сложные фигуры или круги-квадратики? Просто, никто ведь не мешает анимацию и хитрые фигуры рисовать на канве, а поверх него расположить обычные HTML-блоки, чтобы обрабатывать клики. 30 июн 2020 в 20:46
  • сложные фигуры и их много будет очень. 1 июл 2020 в 1:37

1 ответ 1

2

Позволяет ли такой способ работать со слоями канваса - так же как с обычными дом елементами?

Канвас это холст со всеми вытекающими. Вы можете на нём что-то нарисовать или что-то стереть. Все слои придётся держать в памяти js и перерисовывать по мере необходимости.

Какие существуют стратегии с точки зрения подходов написания кода - в разрезе того, если стоит задача иметь 100500 разных слоев, при клике на которые - должны происходить какие то действия?

Всё очень зависит от задач. При клике на canvas вы можете получить только координаты клика и больше ничего. Всю остальную логику придётся реализовывать самому или брать готовые библиотеки. Главное учтите, что у разных браузеров на разных платформах разные ограничения по количеству одновременно существущих canvas и их размеры, так что иногда приходится идти на разные ухищрения: https://webglfundamentals.org/webgl/lessons/webgl-multiple-views.html

Если работать без дополнительных библиотек - на какие моменты в первую очередь необходимо обратить внимания - для ускорения и оптимизации работы?

Учтите, что canvas ничего не знает о физических пикселях и на устройствах с devicePixelRatio > 1 вам придётся увеличивать размер canvas на величину devicePixelRatio и подгонять под размер с помощью css.

Не существует универсального метода по количеству canvas для производительности, на одних платформах дешевле нарисовать фон изображение на нескольких canvas, на других дешевле нарисовать всё на одном, на третьих html поверх canvas будет лучшим выбором. Придётся долго и нудно тестить.

WebGl будет однозначно быстрее ибо рэндер будет сразу на видеокарте, но на нём, например довольно гемморойно рендерить шрифты. При этом придётся учиться писать шейдеры. Могу посоветовать хороший ресурс: https://webglfundamentals.org/

Нет никакого легального способа синхронизировать html и канвас, а html это очень медленно, на мобилках это очень сильно заметно. Если выбьетесь из бюджета по пикселям, то гора веселья вам обеспечена.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.