Каков самый быстрый способ рисовать X количество кругов в холсте HTML5?

Простой вопрос относительно скорости рисования холста.Каков самый быстрый способ рисовать X количество кругов в холсте HTML5?

Было бы проще нарисовать 100 кругов на 1 холсте или 1 круг в 100 полотнах?

источник

2017-02-21 Max

Я еще не сделал тест производительности, я думал, что это запрос здесь первым. Он использует методы пути да. Что вы подразумеваете под рисунком на экранном холсте? делает ли это, что каждый круг будет идентичным? – Max

Подготовьте буферы в нескольких рабочих, расположите их вместе и положите в холст. но это должно быть сложнее, чем использование команд прямого рисования. –

Это проблема для каждого случая, и все сводится к тому, чтобы «выполнить тестовые функции» с вашими требованиями. Для одного размера кругов с одним цветом putImageData является самым быстрым с большим количеством объектов (> 5000). Ниже, drawImage (offscreenCanvas) выполняется так же быстро, как требуется. Для постоянно меняющихся размеров кругов одного цвета, один путь, состоящий из ваших кругов, может быть быстрее до 20000 объектов. Поэтому я сам постоянно меняю размеры кругов в <20 группах цветов с> 15000 кругов (да, сюжеты ...) Я сортирую свои круги по цвету и рисую их с помощью одного пути. – Kaiido

-1

Это намного проще сделать 100 кругов в одном полотне:

Если у вас есть те же действия, называемые, будь то 1 холст * 100 кругов или 100 холстов * 1 круг, вы все еще рассказывающие программа нарисовать то же самое количество раз.

Так в чем же разница?

Когда вы вводите в программу 100 полотенец, программа будет работать намного медленнее, потому что она должна хранить их в фоновом режиме. Хотя скорость не будет уменьшаться слишком сильно, она все равно будет уменьшаться.

Еще одно преимущество для одного холста заключается в том, что управлять одним холстом намного проще, чем на 100 холстах.

Редактирование: на одном холсте вы также можете наложить круги (если хотите), но если у вас есть 100 холстов, круги не могут пересекаться.

Я надеюсь, что это помогло вам :)

источник

2017-02-21 16:23:24

Каков самый быстрый способ рисовать X количество кругов в холсте HTML5?

ответ

Смежные вопросы