如何根据鼠标位置使 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

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

How to make canvas -element to fill and refill depending on the mouse position

javascript

jquery

html

canvas

onmousemove