在鼠标悬停时使用jQuery在HTML5画布上更改自定义形状的颜色？

Question

对于我正在尝试使用HTML5 Canvas和jQuery制作的地图，我有more specific regex。我已经制作了一些形状并填充了颜色。我不知道该怎么做才能使鼠标悬停在自定义形状上时颜色发生变化。任何解决方案？

<canvas id="canvas" width="700" height="485">
</canvas>

<script>
$(document).ready(function() {

     var tech = canvas.getContext( '2d' );
     tech.beginPath();
     tech.moveTo(250, 280);
     tech.lineTo(240, 280);
     tech.lineTo(240, 315);
     tech.lineTo(277, 315);
     tech.lineTo(277, 287);
     tech.lineTo(250, 287);
     tech.closePath();
     tech.stroke();
     tech.fillStyle = "rgba(0, 0, 255, 0.3)";
     tech.fill();

     union = canvas.getContext( '2d' );
     union.beginPath();
     union.moveTo(400, 195);
     union.lineTo(386, 195);
     union.lineTo(386, 198);
     union.lineTo(364, 198);
     union.lineTo(364, 215);
     union.lineTo(386, 215);
     union.lineTo(386, 207);
     union.lineTo(400, 207);
     union.closePath();
     union.stroke();
     union.fillStyle = "rgba(0, 0, 255, 0.3)";
     union.fill();

     cntr = canvas.getContext( '2d' );
     cntr.beginPath();
     cntr.moveTo(340, 196);
     cntr.lineTo(320, 196);
     cntr.lineTo(320, 222);
     cntr.lineTo(340, 222);
     cntr.closePath();
     cntr.stroke();
     cntr.fillStyle = "rgba(0, 0, 255, 0.3)";
     cntr.fill();

     picho = canvas.getContext( '2d' );
     picho.beginPath();
     picho.moveTo(300, 240);
     picho.lineTo(285, 240);
     picho.lineTo(285, 250);
     picho.lineTo(300, 250);
     picho.closePath();
     picho.stroke();
     picho.fillStyle = "rgba(0, 0, 255, 0.3)";
     picho.fill();
});
    </script>

Answer 1

您可以使用数学来测试圆形和矩形形状，但是为了测试不规则形状（例如您的形状），最好使用context.isPointInPath。

isPointInPath通过测试指定的[x，y]是否在最近定义的路径内来工作。这意味着要测试您的不规则形状，您必须先重新定义每条路径，然后使用isPointInPath

测试重新定义的路径

＆＃34;重新定义＆＃34;表示从beginPath到closePath重新执行特定路径的代码。但是，没有必要划线或填充定义的路径。

以下是示例代码和演示：

＆＃13;

＆＃13;

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

var isDown=false;
var startX,startY;

var paths=[];
paths.push([
  {x:400,y:95},
  {x:386,y:95},
  {x:386,y:98},
  {x:364,y:98},
  {x:364,y:115},
  {x:386,y:115},
  {x:386,y:107},
  {x:400,y:107}
]);

ctx.fillStyle='skyblue';

draw();

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

function draw(highlight){
  ctx.clearRect(0,0,cw,ch);
  for(var i=0;i<paths.length;i++){
    var path=paths[i];
    define(path);
    ctx.stroke();
    if(i==highlight){
      ctx.fill();
    }
  }
}

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

function handleMouseMove(e){

  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  var highlight=-1;
  for(var i=0;i<paths.length;i++){
    var path=paths[i];
    define(path);
    if(ctx.isPointInPath(mouseX,mouseY)){
      highlight=i;
    }
  }
  draw(highlight);

}

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Move the mouse over the shape to highlight the shape</h4>
<canvas id="canvas" width=450 height=450></canvas>

＆＃13;

＆＃13;

＆＃13;