Maus Hover Canvas/Form

Question

Ich habe diesen Code in Jquery. Ich möchte den Deckkraftanteil der einzelnen Formen beim Mouseover ändern. Ich habe normalerweise nicht diese Art von Problemen, aber ich weiß nicht viel über Leinwand ...

Jede Hilfe/Beratung wäre zu schätzen wissen! Danke im Voraus!

var canvas = document.getElementById('canvas'); 
    if (canvas.getContext) { 
     var ctx = canvas.getContext('2d'); 
     ctx.canvas.addEventListener('mousemove', function(event){ 
     var mouseX = event.clientX; 
     var mouseY = event.clientY; 
     var status = document.getElementById('status'); 
      status.innerHTML = mouseX + " | " + mouseY; 
     }); 
     ctx.beginPath(); 
     ctx.moveTo(67, 254); 
     ctx.lineTo(57, 180); 
     ctx.lineTo(87, 92); 
     ctx.lineTo(158, 116); 
     ctx.lineTo(193, 168); 
     ctx.lineTo(196, 244); 
     ctx.lineTo(135, 302); 
     ctx.lineTo(67, 254); 
     ctx.fillStyle = 'rgba(255, 240, 0, 0.5)'; 
     ctx.fill(); 
     ctx.closePath(); 

     ctx.beginPath(); 
     ctx.moveTo(211, 156); 
     ctx.lineTo(209, 96); 
     ctx.lineTo(226, 37); 
     ctx.lineTo(292, 49); 
     ctx.lineTo(307, 92); 
     ctx.lineTo(305, 154); 
     ctx.lineTo(286, 168); 
     ctx.lineTo(258, 157); 
     ctx.lineTo(254, 171); 
     ctx.lineTo(211, 156); 
     ctx.fillStyle = 'rgba(255, 240, 0, 0.5)'; 
     ctx.fill(); 
     ctx.closePath(); 


     ctx.beginPath(); 
     ctx.moveTo(230, 368); 
     ctx.lineTo(228, 274); 
     ctx.lineTo(259, 154); 
     ctx.lineTo(396, 202); 
     ctx.lineTo(406, 258); 
     ctx.lineTo(398, 352); 
     ctx.lineTo(357, 456); 
     ctx.lineTo(230, 368); 
     ctx.fillStyle = 'rgba(255, 240, 0, 0.5)'; 
     ctx.fill(); 
     ctx.closePath(); 

     ctx.beginPath(); 
     ctx.moveTo(338, 183); 
     ctx.lineTo(340, 132); 
     ctx.lineTo(357, 62); 
     ctx.lineTo(453, 80); 
     ctx.lineTo(455, 132); 
     ctx.lineTo(449, 196); 
     ctx.lineTo(428, 240); 
     ctx.lineTo(400, 228); 
     ctx.lineTo(395, 202); 
     ctx.lineTo(338, 183); 
     ctx.fillStyle = 'rgba(255, 240, 0, 0.5)'; 
     ctx.fill(); 
     ctx.closePath(); 

}

My project JsFiddle

Answer 1

Verwenden context.isPointInPath getroffen Test, wenn die Maus in einem Ihrem Pfad ist.

Hier ist ein kurzes Beispiel:

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
function reOffset(){ 
 
    var BB=canvas.getBoundingClientRect(); 
 
    offsetX=BB.left; 
 
    offsetY=BB.top;   
 
} 
 
var offsetX,offsetY; 
 
reOffset(); 
 
window.onscroll=function(e){ reOffset(); } 
 
window.onresize=function(e){ reOffset(); } 
 

 
ctx.fillStyle='blue'; 
 

 
var shapes=[]; 
 
shapes.push(
 
    [{x:67,y:254},{x:57,y:180}, 
 
     {x:87,y:92},{x:158,y:116}, 
 
     {x:193,y:168},{x:196,y:244}, 
 
     {x:135,y:302},{x:67,y:204}] 
 
); 
 

 
ctx.globalAlpha=0.25; 
 
for(var i=0;i<shapes.length;i++){ 
 
    defineshape(shapes[i]); 
 
    ctx.fill(); 
 
} 
 
ctx.globalAlpha=1.00; 
 

 
$("#canvas").mousemove(function(e){handleMouseMove(e);}); 
 

 
function defineshape(s){ 
 
    ctx.beginPath(); 
 
    ctx.moveTo(s[0].x,s[0].y); 
 
    for(var i=1;i<s.length;i++){ 
 
     ctx.lineTo(s[i].x,s[i].y); 
 
    } 
 
    ctx.closePath(); 
 
} 
 

 
function handleMouseMove(e){ 
 
    // tell the browser we're handling this event 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 
    // mouse position 
 
    mouseX=parseInt(e.clientX-offsetX); 
 
    mouseY=parseInt(e.clientY-offsetY); 
 
    // test if mouse is inside any shape(s) 
 
    // and redraw different alpha based on hovering 
 
    ctx.clearRect(0,0,cw,ch); 
 
    for(var i=0;i<shapes.length;i++){ 
 
     defineshape(shapes[i]); 
 
     if(ctx.isPointInPath(mouseX,mouseY)){ 
 
      ctx.globalAlpha=1.00; 
 
     }else{ 
 
      ctx.globalAlpha=0.25; 
 
     } 
 
     ctx.fill(); 
 
    } 
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Hover over shape with mouse.</h4> 
 
<canvas id="canvas" width=300 height=350></canvas>