盘锦做网站建设的/阐述网络推广的主要方法
相关博客：JavaScript判断点是否在多边形内部并使用Canvas可视化_ 一只博客-CSDN博客
本文核心算法参考博客：二维平面上判断点是否在三角形内 - tenos - 博客园 (cnblogs.com)
原作者参考了如下资料，使用C++写了4个判断方法
判断点是否在三角形内 - 翰墨小生 - 博客园
向量点积(Dot Product),向量叉积(Cross Product)_易水寒-CSDN博客
叉乘法判断点是否在三角形内_dracularking的竹林小屋-CSDN博客_叉乘判断点是否在三角形内
我挑选了最优的方法，使用JavaScript实现了一下，并加了实时修改点位置和可视化的功能
效果图，修改任何数据后页面立刻清空画布并重新判断和绘制
<!DOCTYPE html>
<html><head><style type="text/css">.info {width:400px;resize: none;border: none;cursor: pointer;}</style></head><body><canvas id="canvas" width="500" height="500"></canvas><textarea class="info" id="text" readonly="readonly"></textarea><div id="xy">A<input type="text" id="Ax" value="120" size="2">,<input type="text" id="Ay" value="210" size="2"><br>B<input type="text" id="Bx" value="280" size="2">,<input type="text" id="By" value="300" size="2"><br>C<input type="text" id="Cx" value="400" size="2">,<input type="text" id="Cy" value="140" size="2"><br>P<input type="text" id="Px" value="200" size="2">,<input type="text" id="Py" value="300" size="2"><br></div><script type="text/javascript">const xy = document.getElementById('xy')fresh()xy.onchange = fresh//实时计算并更新画布function fresh() { var Triangle = [[+document.getElementById("Ax").value, +document.getElementById("Ay").value],[+document.getElementById("Bx").value, +document.getElementById("By").value],[+document.getElementById("Cx").value, +document.getElementById("Cy").value]]var Point = [+document.getElementById("Px").value, +document.getElementById("Py").value]if(isPointInTriangle(Triangle, Point)){document.getElementById("text").value = "The point is in the triangle."}else{document.getElementById("text").value = "The point is not in the triangle."}drawTriangle(Triangle)drawPoint(Point)}//画三角形function drawTriangle(Triangle){var canvas = document.getElementById("canvas")var ctx = canvas.getContext("2d")ctx.clearRect(0, 0, canvas.width, canvas.height)ctx.beginPath()ctx.moveTo(Triangle[0][0], Triangle[0][1])ctx.lineTo(Triangle[1][0], Triangle[1][1])ctx.lineTo(Triangle[2][0], Triangle[2][1])ctx.closePath()ctx.stroke()}//画点function drawPoint(point){var canvas = document.getElementById("canvas")var ctx = canvas.getContext("2d")ctx.beginPath()ctx.arc(point[0], point[1], 3, 0, 2*Math.PI)ctx.closePath()ctx.stroke()}//核心函数，判断点是否在三角形内部function isPointInTriangle(Triangle, Point){var PA = [Triangle[0][0] - Point[0], Triangle[0][1] - Point[1]]var PB = [Triangle[1][0] - Point[0], Triangle[1][1] - Point[1]]var PC = [Triangle[2][0] - Point[0], Triangle[2][1] - Point[1]]var t1 = PA[0]*PB[1] - PA[1]*PB[0]var t2 = PB[0]*PC[1] - PB[1]*PC[0]var t3 = PC[0]*PA[1] - PC[1]*PA[0]return t1*t2 >= 0 && t1*t3 >= 0}</script></body>
</html>