javascript - 将鼠标悬停在 canvas 的多幅图像中的 1 幅图像上

Question

我正在尝试使用 Canvas 中的悬停编写演示。

问题是这样的:

- 我有 1 个 Canvas ，其中有 2 张图像。

- 我希望当我将鼠标悬停在 2 张图片中的其中一张时发生这种变化(在这种情况下是改变颜色)。

但是当我将鼠标悬停时，所有 Canvas 都发生了变化。我的 Canvas 有 1 个 ID，所以我不知道该怎么做。

这是我的悬停:

 $("#after_image").hover(function() {
        setFilter(red);
    }, function() {
        setFilter(grayscale);
    });

这是我不悬停和悬停时的屏幕:

我按照这里的教程:

http://www.storminthecastle.com/2013/04/06/how-you-can-do-cool-image-effects-using-html5-canvas/

我是垃圾车，请帮帮我!

感谢阅读。 :)

Answer 1

这就是应该的方式，因为“#after_image”包含这两个图像。为其他图像创建新的 Canvas 元素，一旦为它们添加悬停事件，您应该就可以开始了。

甚至可以添加一个类而不是 ID 并使用 $(this)

祝你好运!