Canvas指定三角形内部生成随机点

使用重心坐标（barycentric coordinates）或者通过面积比例的方法来确定点是否在三角形内。不过，对于简单的应用，一种常见的方法是使用随机点并检查它们是否在三角形内部。如果不在，就重新生成，直到得到足够数量的在三角形内的点。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Random Points in Triangle</title>
</head>
<body><canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas><script>// 获取Canvas元素和绘图上下文var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');// 定义三角形的三个顶点var vertex1 = { x: 50, y: 400 };var vertex2 = { x: 450, y: 50 };var vertex3 = { x: 50, y: 50 };// 检查点是否在三角形内部（使用面积法）function isPointInTriangle(px, py, v1, v2, v3) {var b1 = (py - v3.y) * (v2.x - v3.x) - (px - v3.x) * (v2.y - v3.y);var b2 = (py - v1.y) * (v3.x - v1.x) - (px - v1.x) * (v3.y - v1.y);var b3 = (py - v2.y) * (v1.x - v2.x) - (px - v2.x) * (v1.y - v2.y);return (b1 > 0 || b2 > 0 || b3 > 0) && (b1 < 0 || b2 < 0 || b3 < 0);}// 生成三角形内部的随机点function getRandomPointInTriangle(v1, v2, v3) {var r1, r2, s, t;// 生成两个0到1之间的随机数do {r1 = Math.random();r2 = Math.random();// 计算重心坐标s = r1;t = 1 - r1 - r2 * Math.sqrt(r1); // 确保t在0到1之间// 如果s+t+r2>1，则点在三角形外部，重新生成} while (s + t > 1);// 根据重心坐标计算点的位置var px = v1.x + s * (v2.x - v1.x) + t * (v3.x - v1.x);var py = v1.y + s * (v2.y - v1.y) + t * (v3.y - v1.y);return { x: px, y: py };}// 绘制三角形function drawTriangle(v1, v2, v3) {ctx.beginPath();ctx.moveTo(v1.x, v1.y);ctx.lineTo(v2.x, v2.y);ctx.lineTo(v3.x, v3.y);ctx.closePath();ctx.strokeStyle = 'black';ctx.lineWidth = 1;ctx.stroke();}// 绘制指定数量的随机点function drawRandomPointsInTriangle(numPoints, v1, v2, v3) {ctx.fillStyle = 'red'; // 设置点的颜色for (var i = 0; i < numPoints; i++) {var point = getRandomPointInTriangle(v1, v2, v3);// 确保点在三角形内部（理论上getRandomPointInTriangle已经保证了这一点，但这里可以作为一个额外的检查）if (isPointInTriangle(point.x, point.y, v1, v2, v3)) {ctx.beginPath();ctx.arc(point.x, point.y, 2, 0, Math.PI * 2, true); // 绘制一个小圆作为点ctx.fill();} else {// 如果出于某种原因点不在三角形内（理论上不应该发生），则重新生成该点i--; // 减少计数器，因为这次循环没有成功生成一个有效点}}}// 调用函数绘制三角形和随机点drawTriangle(vertex1, vertex2, vertex3); // 先绘制三角形drawRandomPointsInTriangle(10, vertex1, vertex2, vertex3); // 再绘制随机点</script>
</body>
</html>