更改画布上的不透明度与悬停切换

Question

我一直在尝试在游戏中创建菜单的副本，但有一件事缺失。当你悬停不同的画布时，我希望他们改变不透明度，但由于它不是div或图像，所以它非常复杂。而且由于我仍然在努力学习这一切，所以我想知道如何让这成为可能。

这里是我的小提琴：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

我想你需要做的是跟踪鼠标，其中的在屏幕上。我用一些能够向你展示你指点的东西更新你的小提琴。一旦你知道你指的是哪一部分，你可以使用相同的画布方法，你显然知道如何去创建叠加层。

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

你可以看到我添加了两个功能，您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);