Question

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

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

Fiddle here

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

提前致谢！

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

如何根据鼠标位置制作canvas -element来填充和重新填充

1 个答案: