@GavrilovArtem

Canvas — fillRect() vs moveTo(), lineTo(), stroke()?

Столкнулся на проекте со следующей ситуацией.
Имеется кастомный видеоплеер с таймлайном, реализованным через canvas.
Есть канвас размером ~ 1600*8 и на нем нужно по условию отрисовывать до 150-200 прямоугольников другого цвета.

Первым решением была сделана отрисовка через fillRect(). Затем переделано на moveTo(), lineTo(), stroke().
Так как история давняя, автора сего коммита уже не найти.

Если кто сталкивался с подобными задачами, подскажите, есть ли заметная разница по производительности между этими вариантами? (параллельно попробую воссоздать ситуацию, когда прямоугольников действительно много)
В моем понимании отрисовка обычного прямоугольника - это более простая задача. Это так?
  • Вопрос задан
  • 60 просмотров
Пригласить эксперта
Ответы на вопрос 1
killovv
@killovv
vk.com/2style
Разобрался что быстрее? тестировал отрисовку в хроме с тротлингом, стало интересно это тротлинг так влияет или картина и вправду такая как получилась у меня

рисуются почти одинокого при отрисовке по одному квадрату за раз:
что - fillRect()
что - ctx.beginPath() ctx.moveTo() ctx.lineTo() ctx.stroke()

просадки начинаются когда рисуешь группами:
так - n*раз rect() и в конце вызвать fill()
или - n*раз ctx.moveTo() + ctx.lineTo() и в конце вызвать ctx.stroke()
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы