使用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%的工作，如预期在一个真实的网站。