将鼠标悬停在JS画布上的不同形状上

Question

我怎么能得到路径绘制画布？通过JSON吸引我超过30个矩形，但我是如何吸引下面的功能悬停在悬停在特定的绘制画布上后改变我的背景？

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.globalAlpha = 0.7;
var grd = ctx.createLinearGradient(150, 2, 300, 200);
grd.addColorStop(0, "red");
grd.addColorStop(1, "red");
ctx.fillStyle = grd;
ctx.fillRect(200,200,200,200); 

$(canvas).hover(function() {
  $(this).css("background-color", "yellow");
  console.log(ctx);
},function() {
  $(this).css("background-color", "");
});

^这是它的样子。

当鼠标在绘制元素上时，我想要更改背景

Answer 1

您可能需要对像素进行颜色编码，或者跟踪您绘制的矩形，然后在鼠标移动时执行点到矩形的碰撞检查。

也许使用SVG而不是画布会使您的任务更容易，因为SVG元素可以单独生成事件。