我想为每个 Canvas 应用不同的悬停颜色，谁能告诉我如何为 Canvas 编写悬停。 这是我的代码:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="350" height="200" style="border:1px solid #c3c3c3;"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
var x = c.getContext("2d");
x.fillStyle = "yellow";
x.fillRect(175,0,150,75);
var y = c.getContext("2d");
y.fillStyle = "green";
y.fillRect(0,95,150,75);
</script>
</body>
</html>
最佳答案
如果你需要一个想法，你可以看下面的代码；它在悬停在像素阵列中存在的点上时形成一个小圆圈。你可能会问你需要在里面知道什么..
var pixel = [{x:10,y:10}] //Coordinates array
function handleMouse(e){
var ctx= tooltip.getContext("2d");
var hit= 0;
var xMouse = e.pageX;
var yMouse = e.pageY;
//console.log(xMouse, yMouse);
var curleft = curtop = 0;
var obj = graph;
if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
//console.log(curleft,curtop);
for (i=0;i<pixel.length;i++){
var dx = xMouse - curleft - pixel[i].x;
var dy = yMouse - curtop - pixel[i].y;
if(dx*dx + dy*dy <=radiiGraphPoint*radiiGraphPoint ){
//console.log("on Circle");
tooltip.style.display='block';
tooltip.style.left=pixel[i].x+ 'px';
tooltip.style.top= pixel[i].y-tooltip.height-10 + "px";
ctx.fillStyle="#474747";
ctx.fillRect(0,0,tooltip.width,tooltip.height);
ctx.fillStyle="#fff";
ctx.textAlign="center";
ctx.textBaseline="middle";
ctx.font="italic 600 8.5pt sans-serif";
ctx.fillText(pixel[i].X +","+ pixel[i].Y,tooltip.width/2,tooltip.height/2);
c.fillStyle="#79EDED";
c.beginPath();
c.arc(pixel[i].x,pixel[i].y,radiiGraphPoint+2,0, Math.PI * 2,true);
c.fill();
hit=1;
}
}
if(hit==0){
tooltip.style.display='none';
build_graph();
}
}
关于javascript - 在 javascript 中为 Canvas 应用不同的悬停效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32985239/