更改畫布上的不透明度與懸停切換

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);