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

Posted 2023-02-16

【中文标题】如何使画布元素根据鼠标位置填充和重新填充

【英文标题】：How to make canvas -element to fill and refill depending on the mouse position

【发布时间】：2015-08-07 20:29:45

【问题描述】：

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

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

Fiddle here

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

提前致谢！

【参考方案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

【讨论】：

很好的答案！非常感谢。

@Shamppi 为您添加了另一个示例