javascript - 如何根据鼠标位置使 Canvas 元素填充和重新填充

Question

我有一个脚本，它跟随鼠标的 Y 位置，然后填充 <canvas> 的 宽度鼠标向下移动时的矩形。

换句话说:鼠标越低 - Canvas 的彩色区域越广，反之亦然。

Fiddle here

现在的问题是 Canvas 只填充，如果鼠标向上移动，填充区域保持不变而不是缩小。

提前致谢!

Answer 1

这是因为 Canvas 从字面上看就像一个 Canvas 。

您的脚本将线条涂成绿色。它无法取消绘制线条。你需要有一个相等的相反函数，它不断地从另一边用红色填充线。

如果不使用 Canvas，您可以更轻松地实现这一目标。

$(document).mousemove(function(e){
    var mouseY = e.pageY;
    $('.fill').width(mouseY);
});

参见示例 JSFIDDLE

您也可以像这样非常轻松地同时显示 X 和 Y:

$(document).mousemove(function(e){
    var mouseY = e.pageY;
    var mouseX = e.pageX;
    $('.fillY').width(mouseY);
    $('.fillX').width(mouseX);
});

参见示例 JSFIDDLE