javascript - 更改用悬停切换的 Canvas 上的不透明度

Question

我一直在尝试在游戏中创建菜单的副本，但缺少一件事。当您将鼠标悬停在不同的 Canvas 上时，我希望它们改变不透明度，但由于它不是 div 或图像，因此非常复杂。由于我仍在努力学习所有这些，所以我想知道我将如何做到这一点。

这是我的 fiddle :http://jsfiddle.net/wkx8dzn0/2/

我的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>

Answer 1

我认为您需要做的是跟踪鼠标在屏幕上的位置。我更新了你的 fiddle ，用一些可以告诉你你指向哪里的东西。一旦您知道您指向的部分，您就可以使用您显然知道如何创建叠加层的相同 Canvas 方法。

http://jsfiddle.net/wkx8dzn0/5/

您可以看到我在您的 JS 底部添加了两个函数。 getMousePos 返回鼠标在 Canvas 上的 X 和 Y 坐标位置。每当您在 Canvas 上移动鼠标时，另一个函数就会运行，使用 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);