Javascript Div覆盖画布，鼠标悬停

我有画布区域，在那里我可以添加一些图像。 我想把整个画布分成几个部分，只下载图像的一部分

如果我把div和彩色叠加画布放在一起，我就不能把元素移到里面。 但我想向用户显示哪些区域已被选中，哪些区域将被下载

是否可以显示一些DIV覆盖画布并使用画布进行管理

---

如果没有，我如何才能为我的div侦听鼠标悬停事件，因为它的z索引比我的画布图像低？

您可以在图像画布的顶部使用第二个（覆盖）画布来着色下面图像画布的所需部分，而不是尝试为div着色

• 定义一个表示画布每个部分（矩形）的javascript对象
• 在图像画布上放置第二个覆盖画布，并告诉它不要使用CSS发出事件：

  指针事件：无

• 在mousemove上，用半透明颜色填充鼠标下方的覆盖画布部分

以下是示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var overlay=document.getElementById（“overlay”）；
var octx=overlay.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
函数reOffset（）{
var BB=canvas.getBoundingClientRect（）；
offsetX=BB.left；
offsetY=BB.top；
}
var offsetX，offsetY；
reOffset（）；
onscroll=函数（e）{reOffset（）；}
onresize=函数（e）{reOffset（）；}
var selectedPart=1；
var部分=[]；
var img=新图像（）；
img.onload=启动；
img.src=https://dl.dropboxusercontent.com/u/139992952/multple/sailboatSmall.png';
函数start（）{
cw=canvas.width=overlay.width=img.width；
ch=画布。高度=覆盖。高度=img.height；
octx.font='18px verdana'；
octx.textAlign='center'；
octx.textBaseline='middle'；
八进制线宽=0.50；
octx.fillStyle='red'；
octx.globalAlpha=0.10；
push（{x:0，y:0，w:cw/3，h:ch/2}）；
零件推送（{x:cw/3，y:0，w:cw/3，h:ch/2}）；
零件推送（{x:cw*2/3，y:0，w:cw/3，h:ch/2}）；
零件推送（{x:0，y:ch/2，w:cw/2，h:ch/2}）；
零件推送（{x:cw/2，y:ch/2，w:cw/2，h:ch/2}）；
ctx.drawImage（img，0,0）；
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
}
功能手柄移动（e）{
//告诉浏览器我们正在处理此事件
e、 预防默认值（）；
e、 停止传播（）；
var x=parseInt（e.clientX-offsetX）；
变量y=parseInt（e.clientY-offsetY）；
对于（var i=0；ip.x&&xp.y&&ythan div不可见。我想用不透明度设置颜色。可能吗？对不起。指针事件：无，我无法在MouseEvent上检测到事件。@iIllll对不起。我想我误解了你的问题--我以为你想让画布在div位于画布顶部时响应事件。你能解释一下是什么吗你需要吗？我在photoshop里有一把尺子。我可以用它把整个画布切成小块，然后通过点击画布的特定部分分别下载。我想用颜色+不透明度填充我的画布，鼠标所在的部分。我已经发布了一个答案，说明如何使用覆盖画布“着色”您当前选择的图像部分。祝您的项目好运！