蒙特卡洛方法求解圆周率

最新推荐文章于 2022-10-25 00:13:19 发布

weixin_34352449

最新推荐文章于 2022-10-25 00:13:19 发布

阅读量207

点赞数

原文链接：http://www.cnblogs.com/web-Kongdp/p/8328504.html

版权

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>蒙特卡洛方法求解圆周率</title>
    <style>
        body {
            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10*/
            -khtml-user-select: none; /*早期浏览器*/
            user-select: none;
        }

        .container {
            width: 500px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 700px;
            box-shadow: 0 0 10px 1px #0000002e;
            text-align: center;
        }

        .btn-container {
            padding: 0 20px 20px;
        }

        .btn-container span {
            display: inline-block;
            border: 1px solid transparent;
            border-radius: 5px;
            line-height: 1.5;
            padding: 0 10px;
            box-sizing: border-box;
            width: 49%;
            text-align: center;
        }

        .btn-container span:hover {
            /*background: black;*/
            border: 1px solid black;
            cursor: pointer;
        }
    </style>

</head>
<body>
<div class="container">
    <h1>蒙特卡洛方法求解圆周率</h1>
    <canvas id="canvas" width="500" height="500" style="background: bisque">
    </canvas>
    <div class="btn-container">
        <span id="btnCalc">增加一万个点</span>
        <span id="btnClear">清除点</span>
        <p id="panel">计算结果</p>
    </div>

</div>
<script>

    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d')
    ctx.translate(250, 250);    //坐标移动到圆心
    document.getElementById('btnCalc').addEventListener('click', function () {
        calc()
    });
    document.getElementById('btnClear').addEventListener('click', function () {
        clear()
    });

    /**
     * 绘制黑色框
     */
    function square() {
        ctx.beginPath();
        ctx.moveTo(-150, 150);
        ctx.lineTo(-150, -150);
        ctx.lineTo(150, -150);
        ctx.lineTo(150, 150);
        ctx.closePath();
        ctx.stroke()
    }

    clear();
    var redNum = 0;
    var blackNum = 0;

    /**
     * 绘制圆点
     * @param x
     * @param y
     * @param r
     */
    function drawCircle(x, y, r) {
        r = r || 1;
        ctx.save();
        if (x * x + y * y < 150 * 150) {
            redNum++;
            ctx.fillStyle = '#f00'
        }
        else {
            blackNum++;
            ctx.fillStyle = '#000'
        }
        ctx.beginPath();
        ctx.arc(x, y, r, 0, 2 * Math.PI);
        ctx.fill();
        ctx.restore()
    }

    /**
     * 随机增加10000个点
     */
    function calc() {
        square();
        for (var i = 0; i < 10000; i++) {
            drawCircle(Math.random() * 300 - 150, Math.random() * 300 - 150);
        }

        var span = document.getElementById('panel');
        span.innerHTML = '在圆形内的共有' + redNum + '个，' + '在圆形外的共有' + blackNum + '单位圆与正方形数量之比是' + (redNum / (blackNum + redNum)).toFixed(3) + '由此计算值为' + '<span style="color: red;text-align: left">' + (redNum * 4 / (blackNum + redNum)).toFixed(5) + '</span>'

    }

    /**
     * 清楚绘制的画布
     */
    function clear() {
        ctx.beginPath();
        ctx.moveTo(-150, 150);
        ctx.lineTo(-150, -150);
        ctx.lineTo(150, -150);
        ctx.lineTo(150, 150);
        ctx.closePath();
        ctx.fillStyle = '#fff';
        ctx.fill();
        square()
    }

</script>
</body>
</html>