如何解决在画布HTML5内的路径上悬停效果
我在画布内有一个路径，我想在每个形状上添加一个悬停效果。当用户将鼠标悬停在形状上时，我想使形状的背景色透明。到目前为止，我已经将悬停功能附加到画布上，但是我想将其附加到形状上。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// ctx.fillStyle = "green";
// ctx.fillRect(0,150,150)
// ctx.fillStyle = 'green';
// ctx.fillText("hello workd",10)
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(350,100)
ctx.lineTo(500,95)
ctx.lineTo(500,130)
ctx.lineTo(350,135)
ctx.lineTo(100,130)
ctx.closePath()
ctx.fillStyle = "green";
ctx.fill()
ctx.lineWidth = 10
ctx.strokeStyle = "red"
ctx.stroke()
ctx.beginPath();
ctx.moveTo(100,200);
ctx.lineTo(350,200)
ctx.lineTo(500,195)
ctx.lineTo(500,230)
ctx.lineTo(350,235)
ctx.lineTo(100,230)
ctx.closePath()
ctx.fillStyle = "green";
ctx.fill()
ctx.lineWidth = 10
ctx.strokeStyle = "red"
ctx.stroke();
canvas.onmousemove = function(e){
console.log('x',e.clientX)
console.log('y',e.clientY)
}<!DOCTYPE html>
<html>
<style>
body{
background: red;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
#canvas {
background: white
}
</style>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script src="canvas.js"></script>
</body>
</html>解决方法
指向路径2D
您可以使用isPointInPath()和isPointInStroke检查当前路径上是否有点。或者，为了简化操作，您可以使用Path2D对象来保存路径并将其传递给函数，从而节省了每次鼠标移动时都要创建路径的需要。
示例
下面的示例使用Path2D创建两个路径。然后，mousemove事件使用isPointInPath()检查鼠标是否在路径上。如果更改了哪个路径（1、2或无），则将清除画布，并重新绘制反映新状态的路径。
const ctx = canvas.getContext('2d'),mouse = {x:0,y:0,overPath: null};
const styles = {
default: {fillStyle: "#0C0",strokeStyle: "#F00",lineWidth: 4},over: {fillStyle: "#C008",strokeStyle: "#F0F8",lineWidth: 10},};
const paths = [
[100,50,350,500,45,80,85,100,80],[100,150,145,180,185,180],].map(createPath);
canvas.addEventListener("mousemove",(e) => {
mouse.x = e.offsetX;
mouse.y = e.offsetY;
checkMouseOver(paths);
canvas.style.cursor = mouse.overPath ? "pointer" : "default";
});
function checkMouseOver(paths) {
var over;
for(const p of paths) { ctx.isPointInPath(p,mouse.x,mouse.y) && (over = p) }
if (over !== mouse.overPath) {
mouse.overPath = over;
ctx.clearRect(0,600,200);
for (const p of paths) {
if (p === over) { drawPath(p,styles.over) }
else { drawPath(p) }
}
}
}
function createPath(path) {
var i = 0,p = new Path2D;
while (i < path.length) { p.lineTo(path[i++],path[i++]) }
p.closePath();
return p;
}
function drawPath(path,style = styles.default) {
Object.assign(ctx,style).fill(path);
ctx.stroke(path);
}<canvas id="canvas" width="600" height="200"></canvas>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
