使用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，所以你可以看到它实际上消失了，你可以把它改成一个大数字，如果你想让圆圈直接从画布上拖下来。

此外鼠标后面的圆圈也没有延迟。

<强>更新 固定小提琴，使圆圈也适应窗口偏移。 偏移量与其父元素相关，因此根据画布的深度，您将不得不减去它内部的每个元素偏移量。

的更新 的： 切换到处理'onmouse'事件，这将在真实网站上更好地工作，因为鼠标悬停在iFrame上不能很好地工作，但它仍然有效。将在真实网站上按预期100％工作。