Question

我遇到一个问题，就是当我的鼠标指针靠近形状时，形状的背景颜色已经开始改变。我无法从online.sorry找到有关此问题的任何信息，我可以不要在此处粘贴屏幕截图，请查看下面的jsfiddle链接。

我觉得我的问题不是那么清楚，我想改变鼠标光标在它上面时的形状颜色，现在问题是当我的鼠标光标靠近形状时，它已经变成了白色，鼠标时怎么办光标正好在蓝色区域，然后颜色将变为白色。谢谢！ -

＆＃13;

var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");

//Begin our drawing
ctx.beginPath();
ctx.moveTo(150, 0);
ctx.lineTo(300, 150);
ctx.lineTo(150, 300);
ctx.lineTo(0, 150);

//Define the style of the shape
ctx.lineWidth = 1;
ctx.fillStyle = "rgb(0,173,239)";
ctx.strokeStyle = "rgb(0, 50, 200)";

//Close the path
ctx.closePath();

//Fill the path with ourline and color
ctx.fill();
ctx.stroke();
myCanvas.addEventListener("mouseover", hover, false);
myCanvas.addEventListener("mouseout", hoverOut, false);

function hover(e) {
  var myCanvas = document.getElementById("myCanvas");
  var ctx = myCanvas.getContext("2d");
  ctx.fillStyle = "white";
  ctx.strokeStyle = "rgb(0, 50, 200)";
  ctx.fill();
  ctx.stroke();
}

function hoverOut(e) {
  var myCanvas = document.getElementById("myCanvas");
  var ctx = myCanvas.getContext("2d");
  ctx.fillStyle = "rgb(0,173,239)";
  ctx.fill();
}

＆＃13;

canvas {
  border: black solid 2px;
}

＆＃13;

<canvas id="myCanvas" width="300" height="300"></canvas>

＆＃13;

这是我的代码的jsfiddle链接。谢谢！

Answer 1

您正在画布中创建一个形状，并且当用户将鼠标悬停在形状上而不是画布上时，您希望更改该形状的背景。正确？
替代方法是创建此形状的画布。您可以通过使用CSS转换来实现此目的。您可以在此处查看css transformation的此链接。

Answer 2

如果鼠标悬停在形状上方，您要做的就是更改BG颜色。截至目前，您的“悬停”和“悬停”功能指向整个画布。这就是为什么BG颜色在画布本身内悬停时会发生变化的原因。

要获得所需的功能，您可以尝试以下两种方式：

定义线条边界以检测鼠标指针是否在形状内。 A Demo for defining path
您还可以将外形线条定义为边界，以检测鼠标位置，然后执行功能。 A Demo for defining path boundaries

我希望您能够修改代码。如有任何疑问或进一步的帮助，请在下面评论感谢

第一小提琴概念

function linepointNearestMouse(line,x,y) {
lerp=function(a,b,x){ return(a+x*(b-a)); };
var dx=line.x1-line.x0;
var dy=line.y1-line.y0;
var t=((x-line.x0)*dx+(y-line.y0)*dy)/(dx*dx+dy*dy);
var lineX=lerp(line.x0, line.x1, t);
var lineY=lerp(line.y0, line.y1, t);
return({x:lineX,y:lineY});
};

第二小提琴概念。

function init() {
var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext('2d');
var bigGreen = new BigCircle(ctx,50, 50, '#5eb62b', 50);
$('#canvas').click(function(e){
var x = e.clientX
  , y = e.clientY          
if(Math.pow(x-50,2)+Math.pow(y-50,2) < Math.pow(50,2))   
  bigGreen.clicked()
})    
}

访问JS小提琴以获得确切的功能。

Answer 3

答案是使用Path2d事件和ctx.isPointInPath()方法。

当光标在画布上移动时，概念是检查当前鼠标点是否在路径中（最后定义的路径，或者您可以创建var myCanvas = document.getElementById("myCanvas"); var ctx = myCanvas.getContext("2d"); var pointInfo = document.getElementById("pointInfo"); //Begin our drawing ctx.beginPath(); ctx.moveTo(150, 0); ctx.lineTo(300, 150); ctx.lineTo(150, 300); ctx.lineTo(0, 150); //Close the path ctx.closePath(); //Define the style of the shape ctx.lineWidth = 1; ctx.fillStyle = "rgb(0,173,239)"; ctx.strokeStyle = "rgb(0, 50, 200)"; //Fill the path with ourline and color ctx.fill(); ctx.stroke(); // bind listener myCanvas.addEventListener("mousemove", check, false); function check(e) { // get the current mouse point var pointX = e.offsetX; var pointY = e.offsetY; // make the canvas blank first ctx.clearRect(0, 0, myCanvas.width, myCanvas.height); // check if the mouse point is in the path which is defined at line 4 to line 11 if (ctx.isPointInPath(pointX, pointY)) { // in ctx.fillStyle = "white"; ctx.strokeStyle = "rgb(0, 50, 200)"; ctx.fill(); ctx.stroke(); } else { // out ctx.fillStyle = "rgb(0,173,239)"; ctx.fill(); ctx.stroke(); } // show point info in the page pointInfo.textContent = "Mouse Point: (" + pointX + ', ' + pointY + ')'; }对象）。

＆＃13;

canvas {
  border: black solid 2px;
}

＆＃13;

<div id="pointInfo">Mouse Point: </div>
<canvas id="myCanvas" width="300" height="300"></canvas>

＆＃13;

for key, d in d.items():
     print(key, d)

＆＃13;

当鼠标指针完全位于画布内时，如何更改形状颜色？

3 个答案: