HTML5 Большой холст

Question

Я заметил, что при динамическом создании большого холста (6400x6400), который довольно много времени на нем не будет нарисован, а при установке холста на небольшой размер он работает 100% времени, однако, поскольку я не знаю ничего лучшего, у меня нет другого выбора, кроме как попытаться заставить большой холст работать правильно.

thisObj.oMapCanvas = jQuery(document.createElement('canvas')).attr('width', 6400).attr('height', 6400).css('border','1px solid green').prependTo(thisObj.oMapLayer).get(0);

// getContext and then drawing stuff here... 

Цель холст просто провести линию между двумя узлами (изображения), которые находятся в пределах сНа контейнера, который можно перетаскивать (окно просмотра я думаю, что люди называют их).

Что может произойти, так это то, что при изменении размера холста он очищает холст, и это мешает рисованию контекста, как я уже говорил ранее, он работает все время, когда холст намного меньше.

Кто-нибудь испытал это раньше и/или знал возможные решения?

Answer 1

Это огромный холст. 6400 x 6400 x 4 байта на пиксель - 156 МБ, и для вашей реализации может потребоваться выделить два или более буфера этого размера для двойной буферизации или же нужно также выделить видеопамять этого размера. Потребуется некоторое время, чтобы выделить и очистить всю эту память, и вам не удастся добиться успеха при таком распределении. Есть ли причина, по которой вам нужен такой огромный холст? Вместо этого вы можете попытаться определить размер вашего холста настолько, насколько это необходимо, чтобы нарисовать линию между этими двумя div, или вы можете попробовать использовать SVG вместо холста.

Другой возможностью было бы попытаться разделить ваш холст на большие плитки и только визуализировать те плитки, которые на самом деле видны на экране. Google Maps делает это с изображениями, чтобы загружать изображения только для той части карты, которая в настоящее время видима (плюс несколько дополнительных по каждой стороне экрана, чтобы убедиться, что при прокрутке вам не нужно ждать ее отображения) , сохраняя иллюзию, что есть огромный холст, в то время как на самом деле только что-то немного больше, чем окно.

Answer 2

Большинство браузеров, которые реализуют HTML5, все еще находятся в ранней бета-версии, поэтому вполне вероятно, что они все еще работают с ошибками.

Однако разрешение холста, которое вы пытаетесь создать, очень велико ... намного выше, чем могут отображать мониторы большинства людей. Есть ли причина, в которой вы нуждаетесь в этом достаточно большой? Почему бы не ограничить область перетаскивания чем-то большим в соответствии с типичными разрешениями экрана?

Answer 3

У меня была та же проблема! Я использовал trting, чтобы использовать большой холст для подключения некоторых div. В конце концов я сдался и нарисовал строку, используя javascript (я рисовал свою линию, используя маленькие изображения в качестве пикселей - сначала я делал это с divs, но в IE div были слишком большими).