如果在画出图形之后想要得到鼠标经过了哪条线的数据。那么可以使用以下的方法。
1.isPointInStroke
isPointInStroke是canvas内置的判断鼠标是否在此线段上的方法。
具体使用代码如下:
<!DOCTYPE html>
<html lang="CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 400px;
margin: 0 auto;
box-sizing: border-box;
/* background-color: aqua; */
}
canvas {
/* background-color: #333; */
}
</style>
</head>
<body>
<div class="box">
<canvas id="canvas" width="400" height="400"></canvas>
<SCript>
let canvas = document.getElementById('canvas')
// if (!canvas.getContext) return;
const context = canvas.getContext('2d');
//给canvas绑定鼠标移动事件 函数
function drawUp(e) {
var rect = canvas.getBoundingClientRect();
//得出此时鼠标在canvas中的坐标
let checkCoordinate = [e.clientX - rect.x, e.clientY - rect.y]
draw(checkCoordinate)
}
//画出图形 的函数
function draw(checkCoordinate) {
context.strokeStyle = 'green';
context.lineWidth = 5;
context.moveTo(100, 100);
context.lineTo(150, 150);
context.stroke();
//通过判断 checkCoordinate 是否存在来判断是否给canvas加上 isPointInStroke 事件
if (checkCoordinate && checkCoordinate.length > 0) {
let isPointInPath1 = context.isPointInStroke(checkCoordinate[0], checkCoordinate[1]);
console.log("返回: ", isPointInPath1);
context.closePath();
}
}
//画出图形 开始
draw()