正文

揭秘JS for循环：轻松绘制斐波那契数列之美

/0 浏览量
0320

斐波那契数列（Fibonacci sequence）是数学中的一个经典序列，它以0和1开始，后续的每个数字都是前两个数字的和。斐波那契数列在自然界、艺术和计算机科学中都有广泛的应用。在本文中，我们将探讨如何使用JavaScript中的for循环来生成斐波那契数列，并通过可视化展示其美丽。

斐波那契数列的基本原理

斐波那契数列的定义如下：

  • F(0) = 0
  • F(1) = 1
  • F(n) = F(n-1) + F(n-2) 对于 n > 1

这个序列中的每个数字都是前两个数字的和。例如，斐波那契数列的前10个数字是：0, 1, 1, 2, 3, 5, 8, 13, 21, 34。

使用JavaScript的for循环生成斐波那契数列

在JavaScript中，我们可以使用for循环来遍历序列并计算每个数字。以下是一个简单的示例代码：

// 初始化斐波那契数列的前两个数字
let fib = [0, 1];

// 使用for循环生成斐波那契数列
for (let i = 2; i < 10; i++) {
    // 计算下一个数字
    fib[i] = fib[i - 1] + fib[i - 2];
}

console.log(fib); // 输出: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

在这个例子中，我们首先初始化了一个包含前两个斐波那契数字的数组fib。然后，我们使用for循环来计算后续的数字，并将它们添加到数组中。

可视化斐波那契数列

为了更好地展示斐波那契数列的美丽，我们可以使用JavaScript和HTML5的Canvas元素来绘制它。以下是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>斐波那契数列可视化</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="fibCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('fibCanvas');
        const ctx = canvas.getContext('2d');

        // 绘制斐波那契数列的函数
        function drawFibonacciSequence() {
            const fib = [0, 1];
            for (let i = 2; i < 10; i++) {
                fib[i] = fib[i - 1] + fib[i - 2];
            }

            // 设置画布的起始点
            ctx.beginPath();
            ctx.moveTo(10, canvas.height - 10);

            // 绘制斐波那契数列的线段
            for (let i = 0; i < fib.length; i++) {
                const x = (i + 1) * (canvas.width / fib.length);
                const y = canvas.height - 10 - fib[i] * (canvas.height / 10);
                ctx.lineTo(x, y);
            }

            // 完成绘制
            ctx.stroke();
        }

        // 调用函数绘制斐波那契数列
        drawFibonacciSequence();
    </script>
</body>
</html>

在这个例子中，我们创建了一个HTML页面，其中包含一个Canvas元素。然后，我们定义了一个drawFibonacciSequence函数，该函数使用for循环生成斐波那契数列，并通过Canvas API绘制它。每个斐波那契数字都对应Canvas上的一个点，这些点通过线段连接起来，形成了一个美丽的图案。

通过以上示例，我们可以看到如何使用JavaScript的for循环来生成斐波那契数列，并通过可视化展示其美丽。斐波那契数列不仅是一个数学概念，也是一个充满创意和美感的艺术形式。

-- 展开阅读全文 --