javascript - 鼠标悬停在 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", "");
});

^ 这里是它的样子。

当鼠标在绘制的元素上时我想改变背景

标签： javascriptjqueryhtmlcanvashtml5-canvas

Answer 1

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

也许使用 SVG 代替画布会使您的任务更轻松，因为 SVG 元素可以单独产生事件。