Question

我有一个画布，用户可以通过在图像周围绘制形状来选择图像上的东西。所以画布上可能有多个形状

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

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

由于

Answer 1

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

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

这是一个非常粗略的例子，我很快就把它们拼凑在了一起。我强烈建议更好地构建你的javascript，但这是一个概念证明。在实践中，您将希望以索引格式存储数据，并更好地执行mousemove（）函数调用，因为当用户移动鼠标时（通常使用setTimeout完成并忽略后续调用），它会受到重创。 p>

$(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/

如何让鼠标在画布上形状过度

1 个答案: