當鼠標指針恰好位於畫布內部時，如何更改形狀顏色？

Question

我面臨的一個問題是，當我的鼠標指針靠近該形狀時，該形狀的背景色已經開始發生變化。我無法從在線上找到有關此問題的任何信息。抱歉，我無法將屏幕截圖粘貼到此處，請查看下面的jsfiddle鏈接。

我想我的問題不是很清楚，我想在鼠標光標移到形狀上時更改形狀顏色，現在的問題是當我的鼠標光標靠近形狀時，它已經變成白色了，如何處理鼠標光標正好在藍色區域中，那么顏色將變為白色。 謝謝！ –

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

 canvas { border: black solid 2px; } 

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

這是我的代碼的jsfiddle鏈接。 謝謝！！

Answer 1

您正在畫布內部創建一個形狀，並且您希望在用戶將鼠標懸停在形狀而不是畫布上時更改該形狀的背景。 正確？
替代方法是創建這種形狀的畫布。 您可以通過使用CSS轉換來實現。 您可以在此處查看此鏈接進行CSS轉換 。

Answer 2

如果鼠標懸停在形狀上，您要嘗試更改BG顏色。 到目前為止，您的“懸停”和“懸停”功能都指向整個畫布。 這就是BG顏色在畫布本身內部懸停變化的原因。

要獲得所需的功能，可以嘗試以下兩種方法：

1. 定義線邊界以檢測鼠標指針是否在形狀內。 定義路徑的演示
2. 您還可以將形狀外線定義為邊界，以檢測鼠標位置並執行功能。 定義路徑邊界的演示

希望您有個修改代碼的想法。 如有任何疑問或進一步的幫助，請在下面評論。 謝謝

第一提琴概念

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

答案是使用mousemove事件和ctx.isPointInPath（）方法。

該概念是在光標在畫布上移動時檢查當前鼠標指針是否在路徑（ 最后定義的路徑，或者您可以創建Path2d對象 ）中。

 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 + ')'; } 

 canvas { border: black solid 2px; } 

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