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

Question

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

换句话说：鼠标越低 - 画布的颜色越宽，反之亦然。

在这里提琴

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

提前致谢！

Answer 1

这是因为 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