Все ли перетаскиваемые мышью объекты на холсте HTML5 основаны на setInterval?

Question

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

из тех учебных пособий по перетаскиванию холста, которые я нашел в Интернете, все из них используют setInterval(), чтобы обеспечить взаимодействие с мышью, что означает, что весь холст обновляется и перекрашивается все время , Это заставляет меня чувствовать, что весь холст - это безобразный хак.

У меня вопрос: есть ли другой способ сделать взаимодействие мыши в canvas без setInterval()? Я хочу нарисовать фон один раз и перерисовать только движущуюся часть, когда onmousemove, когда мышь на самом деле движется.

Любая идея приветствуется. Спасибо:)

Answer 1

Сначала нарисуйте фон, затем сохраните холст с помощью canvas.save ().

При взаимодействии с мышью: canvas.restore () и нарисуйте свои рисунки.

Answer 2

Посмотрите на эту статью: http://www.splashnology.com/article/fifteen-puzzle-in-libcanvas/1632/

Есть несколько способов оптимизировать рисование на холсте. Прежде всего - не перерисовывать полное полотно, только измененные детали. И перерисовывать, только если что-то изменилось.

На работе я сейчас создаю игру, основанную на LibCanvas , а фон рисую на другом слое. Примерно так:

var libcanvas  = new LibCanvas( 'canvas' ).start();
var background = libcanvas.createLayer( 'bg', 0 );
drawBackgroundAt  ( background );
startApplicationAt( libcanvas );

Answer 3

На элементе canvas доступно перемещение мыши. Я использую это все время, и я считаю, что это очень полезно в вашей ситуации.

Вы могли бы также сделать это с setInterva, но это звучит немного грязно для меня в этом случае. В любом случае, вам нужно получить мышь X и Y, какое место лучше сделать в событии mousemove!

Answer 4

Вы можете перерисовать холст без перетаскиваемого элемента, а затем нарисовать элемент в новом кане поверх основы.Затем вы можете использовать абсолютное позиционирование для перемещения перетаскиваемого без перерисовки .

Answer 5

Я должен закончить этот вопрос, ответ должен быть requestAnimationFrame из pimvdb

Answer 6

Я думаю, что вы испытываете необходимость в setInterval обновлять холст каждый раз, когда вы взаимодействуете с мышью. И это немного уродливо для вас, потому что это похоже на «Взлом».

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

Но вы можете сделать «обрезку» в методе, который вы вызываете через setInterval, вы можете решить, какая часть вашего холста должна быть обновлена, и перерисовать только эту часть.

Если вам не нужно постоянно обновлять ваш контент, потому что он не анимирован, я согласен с Элмером.

Но обновление холста через setInterval не является ни уродливым, ни грязным ;-) Вы обновляете холст, если хотите что-то оживить.