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