如何让鼠标在画布上超出形状

Question

我有一个画布，用户可以在其中通过在图像周围绘制形状来选择图像。所以画布上可能有不止一种形状

现在我想要的是当鼠标悬停形状时，我想更改画布的不透明度，除了自定义形状（鼠标悬停在哪里）。

就像一些jQuery插件做的反向区域效果 http://davidlynch.org/projects/maphilight/docs/demo_simple.html（此处反作用）

Answer 1

如果我正确理解您的问题，您需要使用 Canvas 的数据模型方法。基本上，您需要存储将出现在画布上的信息。然后，您有一个使用该信息呈现画布的函数。

当用户将鼠标移到画布上时，您可以确定他们相对于画布的 x、y、查看数据并查看 x、y 处的内容。更改数据中的状态并重新构建画布。

这是我快速拼凑起来的一个非常粗略的例子。我强烈建议您更好地构建您的 javascript，但这是一个概念证明。在实践中，您会希望以索引格式存储数据，并更好地调用 mousemove() 函数，因为它会在用户移动鼠标时受到锤击（通常使用 setTimeout 完成并忽略后续调用）。

$(function() {
    function renderCanvas() {
        for(var i = 0; i < data.length; i++) {              
          context.fillRect(data[i].x, data[i].y, data[i].width, data[i].height);
        }        
    }

    var context = $(".myCanvas").get(0).getContext("2d");

    var data = [];

    data.push({ x : 25, y : 25, height : 100, width : 100 });

    renderCanvas();

    $(".myCanvas").mousemove(function(e) {
        for(var i = 0; i < data.length; i++) {
            if (e.pageX > data[i].x && e.pageX < data[i].x + data[i].width && e.pageY > data[i].y && e.pageY < data[i].y + data[i].height) {
               data[i].height = 200;
               renderCanvas();
            }                        
        }
    });
});

小提琴格式：http://jsfiddle.net/wUnDu/1/