v–t 图像的微元累加

在 v–t 图像的基础上，可以实现初始为零（末速为零）的匀加速（匀减速）直线运动在相等时间内的位移的比例性质，推论 Δs = aT²，时间中点速度与位移中点速度的比较，只是以上内容现在课本上并没有明确出现，也不是运动学的核心内容，暂时就不做了。这次要实现的是沪科版必修一第二章第二节自由落体运动的规律中的图 2–11，如下图所示。

图 2–11 v–t 图像与时间轴所包围的“面积”表示位移

做出的成品如下所示：

添加的生成矩形面积的代码如下所示。代码并不长：

// 绘制竖直矩形
function drawRectangles() {
    const rectangleArea = document.getElementById('rectangle-area');
    // 清空现有矩形
    rectangleArea.innerHTML = '';

    // 计算时间范围对应的X坐标范围
    const timeRangeX = {
        min: dragRange.xMin, // 从0开始
        max: dragRange.xMin + (points.point2.t / tRange.max) * (dragRange.xMax - dragRange.xMin)
    };

    // 计算每个矩形的宽度
    const rectWidth = (timeRangeX.max - timeRangeX.min) / segmentCount;

    // 计算面积
    let totalArea = 0;

    // 获取当前颜色
    const color = getColorBySegmentCount(segmentCount);

    // 绘制矩形
    for (let i = 0; i < segmentCount; i++) {
        // 计算矩形的X坐标
        const x1 = timeRangeX.min + i * rectWidth;
        const x2 = x1 + rectWidth;

        // 计算矩形顶部的Y坐标（使用左侧的速度）
        const y1 = getYCoordinateOnLine(x1);
        const y2 = dragRange.yMax; // 底部在X轴上

        // 创建矩形
        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        rect.setAttribute('x', x1);
        rect.setAttribute('y', y1);
        rect.setAttribute('width', rectWidth);
        rect.setAttribute('height', y2 - y1);
        rect.setAttribute('fill', color);
        rect.setAttribute('fill-opacity', '0.6');
        rect.setAttribute('stroke', color);
        rect.setAttribute('stroke-width', '1');

        // 添加到矩形区域
        rectangleArea.appendChild(rect);

        // 计算该矩形的物理面积
        // 计算时间间隔
        const timeInterval = points.point2.t / segmentCount; // 总时间范围是从0到当前时间

        // 计算该矩形左侧的速度
        const x = x1;
        const t = ((x - dragRange.xMin) / (dragRange.xMax - dragRange.xMin)) * tRange.max;
        const v1 = points.point1.v;
        const v2 = points.point2.v;
        const t1 = points.point1.t;
        const t2 = points.point2.t;
        const v = v1 + ((v2 - v1) / (t2 - t1)) * (t - t1);

        // 计算矩形面积（速度×时间间隔）
        const area = v * timeInterval;
        totalArea += area;
    }

    // 更新面积显示
    document.getElementById('rectangle-area-value').textContent = `${totalArea.toFixed(2)} m`;
}

曾经使用 Geogebra 也做过类似的课件，做起来简单得多，因为它内置了 LowerSum（下和）函数，取每个子区间上的最小值作为矩形高度，只需设置好分段数等参数后调用该函数就可以绘制图线下方的矩形，并求出矩形面积。在 Geogebra 中还内置了 UpperSum（上和）函数，取每个子区间上的最大值作为矩形高度，计算的是图线上方的矩形面积。

课本上的图用的是 LowerSum 的思路，求出的矩形面积比真实值小。有趣的是，根据上面的代码，当匀减速运动时求的却是 UpperSum，看看上面的源代码，原来是在“计算该矩形左侧的速度”一行有问题，应该计算“子区间上的最小速度”，否则当加速度为负时，子区间的左侧速度是最大速度，导致矩形面积比真实值大一些。本来想统一成求 LowerSum，后来想想还是不修改了，对于学有余力的学生，让他们看看还有另一种方式求黎曼和也不错。

完整代码

发布时间：2025/12/21 上午11:10:50 阅读次数：306

v–t 图像的微元累加

完整代码

评论