青少年编程与数学 01-009 用编程来学习数学 13课题、一次函数-CSDN博客

本文链接：https://blog.csdn.net/qq_40071585/article/details/141555094

青少年编程与数学 01-009 用编程来学习数学 13课题、一次函数

一、一次函数
二、编程绘制图像
三、调试练习

编程展示一次函数图像。

一、一次函数

一次函数是最基本的线性函数，其形式通常表示为：

[ $y = m x + b$ ]

这里的：

( y ) 是函数的输出值或因变量。
( x ) 是自变量。
( m ) 是斜率（slope），表示函数的倾斜程度，即 ( x ) 每变化一个单位，( y ) 变化 ( m ) 个单位。
( b ) 是 y 轴截距（y-intercept），表示当 ( x = 0 ) 时，( y ) 的值。

特点：

直线性：一次函数的图像是一条直线。
斜率：斜率 ( m ) 决定了直线的倾斜程度。如果 ( m > 0 )，直线从左下方向右上方倾斜；如果 ( m < 0 )，直线从左上方向右下方倾斜。
截距：截距 ( b ) 决定了直线与 y 轴的交点。

图像：

当 ( m > 0 ) 时，图像从第二象限穿过原点到第一象限。
当 ( m < 0 ) 时，图像从第四象限穿过原点到第三象限。
当 ( b > 0 ) 时，图像在 y 轴上的截距为正，即图像在 y 轴的正半轴上。
当 ( b < 0 ) 时，图像在 y 轴上的截距为负，即图像在 y 轴的负半轴上。

应用：

一次函数在现实世界中有广泛的应用，例如：

计算距离和时间的关系（速度乘以时间等于距离）。
经济学中计算成本和数量的关系。
物理学中描述物体的直线运动。

解题技巧：

斜率：通过两点确定斜率，公式为 ( $\frac{y_2 - y_1}{x_2 - x_1}$ )。
截距：一旦斜率确定，可以通过一个点来确定 y 轴截距。
方程组：如果有两个点，可以建立两个方程来求解 ( m ) 和 ( b )。

一次函数是理解更复杂函数的基础，如二次函数、指数函数等。掌握一次函数有助于在数学和科学领域中解决实际问题。

二、编程绘制图像

编写网页，根据用户输入的参数(m和b)，绘制一次函数 $y = m x + b$ 图像。要求如下：

先绘制一个坐标系，并在坐标系绘制一次函数图像。
用户可以从输入框中输入函数的参数。点击绘制按钮后开始绘制。
请使用SVG绘制。画布大小宽度为1000px，高度为800px。
刻度的大小根据截距的数值按比例调整，可以每50px一个刻度，x轴的刻度值标在轴线上方50px处，y轴的刻度值村在右侧50px处。
操作可以反复进行。初始页面根据输入框的缺省值绘制，初始值是m=2，b=5。
需要HTML来构建界面，CSS来设置样式，以及JavaScript来实现转换逻辑。
所有代码都写在一个.html文件中。页面中显示中文。代码中添加中文注释。
设计尽量美观的样式，使用暗色调背景。页面元素在网页中合理居中。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>绘制一次函数</title>
    <style>
        body {
            background-color: #222;
            color: #fff;
            background-color: #222;
            color: #dbc5c5;
            font-family: 'Courier New', Courier, monospace;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            margin: 0;
        }

        .container {
            text-align: center;
            margin: 50px;
        }

        input[type="text"] {
            width: 100px;
            padding: 10px;
            margin: 20px;
            font-size: 16px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }

        svg {
            fill: #ccc;
            stroke: #ccc;
            stroke-width: 2;
        }

        .label {
            fill: yellow;
            font-size: 16px;
        }

        .tick-label {
            font-size: 14px;
        }

        .arrow {
            fill: #ccc;
        }

        .cross-line {
            fill: none;
            stroke: #ccc;
            stroke-width: 2;
        }

        button:hover {
            background-color: #555;
        }
    </style>
</head>

<body>
    <div class="container">
        <label for="slope">斜率 m:</label>
        <input type="text" id="slope" value="2">
        <label for="intercept">截距 b:</label>
        <input type="text" id="intercept" value="5">
        <button type="button" onclick="drawImage()">绘制一次函数图像</button> <br>
        <svg id="svgCanvas" width="1000" height="800"></svg>
    </div>

    <script>
        // JavaScript 代码
        var unit = 1;
        function drawImage() {
            var svg = document.getElementById('svgCanvas');
            var slope = document.getElementById('slope').value;
            slope = Number(slope);
            var intercept = document.getElementById('intercept').value;
            intercept = Number(intercept);
            unit = Math.ceil(intercept * 10 / 8);    // 每刻度值，固定为50px

            clearCanvas(svg);

            // 绘制坐标轴
            drawAxes(svg);

            // 绘制刻度线
            drawGridLines(svg);

            // 绘制一次函数
            drawLine(svg, slope, intercept);
        }

        function clearCanvas(svg) {
            while (svg.firstChild) {
                svg.removeChild(svg.firstChild);
            }
        }

        function drawAxes(svg) {
            // 绘制X轴
            var xAxis = document.createElementNS("http://www.w3.org/2000/svg", "line");
            xAxis.setAttribute("x1", 25);
            xAxis.setAttribute("y1", 400);
            xAxis.setAttribute("x2", 975);
            xAxis.setAttribute("y2", 400);
            xAxis.setAttribute("stroke", "white");
            svg.appendChild(xAxis);

            // 绘制Y轴
            var yAxis = document.createElementNS("http://www.w3.org/2000/svg", "line");
            yAxis.setAttribute("x1", 500);
            yAxis.setAttribute("y1", 25); // 调整Y轴的起点
            yAxis.setAttribute("x2", 500);
            yAxis.setAttribute("y2", 775); // 调整Y轴的终点
            yAxis.setAttribute("stroke", "white");
            svg.appendChild(yAxis);

            // 添加X轴箭头
            var xArrow = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
            xArrow.setAttribute("points", "975,390 975,410 995,400");
            xArrow.setAttribute("fill", "white");
            svg.appendChild(xArrow);

            // 添加Y轴箭头
            var yArrow = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
            yArrow.setAttribute("points", "490,25 510,25 500,0");
            yArrow.setAttribute("fill", "white");
            svg.appendChild(yArrow);
        }

        function drawGridLines(svg) {
            for (var i = 0; i <= 18; i += 1) {
                if (i === 9) continue;
                // X轴方向的刻度线
                var xLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
                xLine.setAttribute("x1", 50 + 50 * i);
                xLine.setAttribute("y1", 380); // 调整Y轴的位置
                xLine.setAttribute("x2", 50 + 50 * i);
                xLine.setAttribute("y2", 400); // 调整垂直长度
                xLine.setAttribute("stroke", "lightgray");
                svg.appendChild(xLine);


                // 标注X轴的刻度值
                var xLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
                xLabel.textContent = (i - 9) * unit;
                xLabel.setAttribute("x", 40 + 50 * i);
                xLabel.setAttribute("y", 425);
                xLabel.setAttribute("font-size", "12px"); // 设置字体大小
                xLabel.setAttribute("fill", "lightgray");
                svg.appendChild(xLabel);

            }

            for (var i = 0; i <= 14; i += 1) {
                if (i === 7) continue;
                // Y轴方向的刻度线
                var yLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
                yLine.setAttribute("x1", 500);
                yLine.setAttribute("y1", 50 + 50 * i); // 调整Y轴的位置
                yLine.setAttribute("x2", 525); // 调整水平长度
                yLine.setAttribute("y2", 50 + 50 * i);
                yLine.setAttribute("stroke", "lightgray");
                svg.appendChild(yLine);
                // 标注Y轴的刻度值
                var yLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
                yLabel.textContent = (7 - i) * unit;;
                yLabel.setAttribute("x", 485);
                yLabel.setAttribute("y", 55 + 50 * i);
                yLabel.setAttribute("font-size", "12px"); // 设置字体大小
                yLabel.setAttribute("fill", "lightgray");
                yLabel.setAttribute("text-anchor", "end");
                svg.appendChild(yLabel);
            }
        }

        function drawLine(svg, m, b) {
            // 绘制一次函数直线
            const linePath = document.createElementNS("http://www.w3.org/2000/svg", "path");
            var mValue = 0;   //X的最小值
            var lValue = 0;    //X的最大值
            var x1 = 0;
            var x2 = 0;
            var y1 = 0;
            var y2 = 0;
            for (i = -9; i < 0; i++) {
                mValue = i * unit;
                lValue = Math.abs(i) * unit;
                var x1 = mValue / unit * 50 + 500;
                var x2 = lValue / unit * 50 + 500;
                var y1 = 400 - (m * mValue + b) / unit * 50;
                var y2 = 400 - (m * lValue + b) / unit * 50;
                if (y1 <= 790 || y2 >= 10) {
                    break;
                }
            }
            linePath.setAttribute("class", "function-line");
            linePath.setAttribute("stroke", "yellow");
            //linePath.setAttribute("d", `M 50, 450 L 950, 200`);
            linePath.setAttribute("d", `M ${x1}, ${y1} L ${x2}, ${y2}`);
            svg.appendChild(linePath);
        }

        // 页面加载时自动绘制初始坐标
        window.onload = function () {
            drawImage();
        };
    </script>
</body>

</html>