Javascript 使用鼠标悬停更改画布上的不透明度

我一直在尝试在游戏中创建一个菜单副本，但缺少一件事。当你悬停在不同的画布上时，我希望它们改变不透明度，但因为它不是一个div或一个图像，所以它相当复杂。由于我仍在努力学习这一切，我想知道我将如何通过这一切使之成为可能

这是我的小提琴：

我的Javascript：

var can=document.getElementById("NewCanvas");
    var ctx=can.getContext("2d");
    var img = new Image();

    img.onload = function() {
    ctx.save(); 
    ctx.moveTo(305,306);
    ctx.lineTo(48,152);
    ctx.lineTo(42,9);
    ctx.lineTo(305,10);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(img,0,0);
    ctx.restore();

    ctx.save(); 
    ctx.moveTo(305,306);
    ctx.lineTo(560,152);
    ctx.lineTo(540,10);
    ctx.lineTo(305,9);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(img,0,0);
    ctx.restore();

    ctx.save(); 
    ctx.moveTo(305,306);
    ctx.lineTo(561,150);
    ctx.lineTo(613,206);
    ctx.lineTo(613,375);
    ctx.lineTo(606,480);
    ctx.lineTo(536,442);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(img,0,0);
    ctx.restore();


    ctx.save(); 
    ctx.moveTo(305,306);
    ctx.lineTo(563,455);
    ctx.lineTo(564,603);
    ctx.lineTo(305,602);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(img,0,0);
    ctx.restore();

    ctx.save(); 
    ctx.moveTo(305,306);
    ctx.lineTo(305,602);
    ctx.lineTo(48,602);
    ctx.lineTo(45,447);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(img,0,0);
    ctx.restore();

    ctx.save(); 
    ctx.moveTo(305,306);
    ctx.lineTo(45,447);
    ctx.lineTo(1,447);
    ctx.lineTo(1,152);
    ctx.lineTo(48,152);
    ctx.closePath();
    ctx.clip();
    ctx.drawImage(img,0,0);
    ctx.restore();
    }

  img.src='http://i.imgur.com/povcJq8.png';

以及HMTL/CSS：

<canvas style="position: absolute; top: 50%; left: 50%; margin-left: -300px; margin-top: -300px;"id="NewCanvas" height="700" width="700">
</canvas>

---

我想你需要做的是跟踪鼠标在屏幕上的位置。我用一些东西更新了你的小提琴，让你知道你指的是什么。一旦知道要指向哪个部分，就可以使用显然知道如何创建覆盖的相同画布方法

您可以看到，我在JS的底部添加了两个函数

getMousePos

返回鼠标在画布上的X和Y坐标位置。另一个函数在画布上移动鼠标时运行，使用

addEventListener

方法

以下是javascript代码：

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
var centerX = 305;
var centerY = 306;
  return {
    x: evt.clientX - rect.left - centerX,
    y: - ( evt.clientY - rect.top - centerY )
  };
}

can.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(can, evt);
var angle = Math.atan(mousePos.y/mousePos.x) * 180 / Math.PI;
if (mousePos.x < 0){
  angle = 180 + angle;
}else if (mousePos.y < 0){
  angle = 360 + angle;
}

  var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y + ' atan ' + angle;
// now you know where the mouse is, create your overlay depending on where the mouse is
if (angle <= 30){
  message += " SMGs";
}else if (angle <= 90){
  message += " HEAVY";
}else if (angle <= 150){
  message += " PISTOLS";
}else if (angle <= 210){
  message += " GRENADES";
}else if (angle <= 270){
  message += " GEAR";
}else if (angle <= 330){
  message += " RIFLES";
}else{
  message += " SMGs";
}

$('#msg').text(message);

}, false);

函数getMousePos（画布，evt）{ var rect=canvas.getBoundingClientRect（）； var centerX=305； var centerY=306； 返回{ x:evt.clientX-rect.left-centerX， y:-（evt.clientY-rect.top-centerY） }; } can.addEventListener（'mousemove'，函数（evt）{ var mousePos=getMousePos（can，evt）； 变量角度=Math.atan（mousePos.y/mousePos.x）*180/Math.PI； 如果（鼠标点x<0）{ 角度=180+角度； }else if（鼠标点y<0）{ 角度=360+角度； } 变量消息='鼠标位置：'+mousePos.x+'，'+mousePos.y+'atan'+角度； //现在您知道了鼠标的位置，根据鼠标的位置创建覆盖

---

如果（角度）那么我的问题是你想让一块“馅饼”在悬停时点亮吗？@dwana是的，没错！哦，天哪，那太棒了！非常感谢你，杰弗里，你真的帮了我很多忙！