标签：myCanvas const arr 实验 投针 context 可视化 let Math
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>needleProblem</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<br>
<input id="times" type="text">
<button id="submit">提交</button>
<script type="text/javascript">
// 初始化
const myCanvas = document.getElementById("myCanvas");
myCanvas.width = 500; // 只能在这里设置，CSS中的设置没有作用
myCanvas.height = 500;
const context = myCanvas.getContext("2d");
const a = 10;
let arr = [];
// 绘制线
for (let i = 0; i < myCanvas.height; i += a) {
context.beginPath();
context.moveTo(0,i);
context.lineTo(myCanvas.width,i);
context.closePath();
context.stroke();
arr.push(i);
}
// 绘制针
const submit = document.getElementById("submit");
submit.addEventListener("click", function() {
const times = document.getElementById("times").value;
const len = a / 2.0;
let timesPoint = 0;
for (let i = 0; i < times; i++) {
let x1 = Math.random() * myCanvas.width;
let y1 = Math.random() * myCanvas.height;
let angle = Math.random() * 2 * Math.PI - Math.PI;
let x2 = x1 + len * Math.cos(angle);
let y2 = y1 + len * Math.sin(angle);
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.closePath();
context.strokeStyle="red";
context.stroke();
// 检测针与线的交点
let length = arr.length;
for (let j = 0; j < length; j++) {
if ((y1 - arr[j]) * (y2 - arr[j]) <= 0) {
timesPoint++;
}
}
}
alert(times/timesPoint);
});
</script>
</body>
</html>
标签：myCanvas,
const,
arr,
实验,
投针,
context,
可视化,
let,
Math
From： https://www.cnblogs.com/H2O-C2H5OH/p/17586751.html