Маскирующий эффект с использованием холста HTML5

Question

Использование canvas и mousemove Создаю эффект маскировки.

Пример: FIDDLE

Маскирующие эффект работает, но на быстрой прокрутки производительность не является идеальным.

Как я могу улучшить частоту кадров?

Answer 1

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

http://jsfiddle.net/gfZ5C/166/

Я также изменил в requestAnimationFrame, вы заметите полную разницу FPS в движении по кругу, вместо того, чтобы он движется по слушателю.

window.onmousemove = function (e) { 
    circle.posX = e.pageX-can.offsetLeft; 
    circle.posY = e.pageY-can.offsetTop; 
    circle.hide = (circle.posX >= 550 || circle.posY >= 550) ? true : false; 
} 
if (!circle.hide) ctx.arc(circle.posX, circle.posY, 70, 0, Math.PI * 2, true); 

Я оставил его на 550, чтобы вы могли видеть, что это на самом деле исчезнет, ​​вы можете изменить его на большом количестве, если вы хотите, чтобы круг просто перетащить вправо от холста.

Также нет следов на круге, следующих за мышью.

Обновление: Исправлена ​​скрипка, так что круг также регулирует смещение окна. Смещение относится к его родительскому элементу, поэтому в зависимости от глубины вашего холста вам придется вычесть каждый смещенный элемент, который находится внутри.

Update: Switched для обработки «onmouse» событий, это будет работать гораздо лучше, на реальном сайте, так как передвигая мышь по плавающем фрейме не работает хорошо, но он все еще работает. Будет работать на 100%, как предполагалось, на реальном сайте.