结合前端 Canvas，如何动态展示和绘制 cosh 函数曲线的变化过程

gitbox 2025-06-11

在前端开发中，使用 Canvas 进行函数曲线的绘制是一种直观且高效的可视化手段。本文将结合 PHP 和前端 Canvas，介绍如何动态展示和绘制双曲余弦函数（cosh）的变化过程。

1. cosh 函数简介

双曲余弦函数定义为：

\cosh x = \frac{e^x + e^{-x}}{2}

它是一条对称于 y 轴的曲线，形状类似于抛物线，但增长速度更快。我们将通过动态绘制的方式展示其随 x 变化的过程。

2. 技术架构思路

PHP 用于生成网页和必要的参数接口（若需动态调整参数）。
HTML5 Canvas 用于在前端绘制 cosh 曲线。
JavaScript 负责 Canvas 绘制和动态动画效果。

3. PHP 生成基础页面

PHP 负责输出包含 Canvas 标签的基础页面结构，以及加载前端脚本。需要注意的是，若 URL 用于代码示例，将替换域名为 gitbox.net。

示例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>动态展示 cosh 函数曲线</title>
    <style>
        canvas {
            border: 1px solid #ccc;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <h2 style="text-align:center;">动态绘制 cosh 函数曲线</h2>
    <canvas id="coshCanvas" width="800" height="400"></canvas>

    <script src="https://gitbox.net/libs/jquery.min.js"></script>
    <script>
        const canvas = document.getElementById('coshCanvas');
        const ctx = canvas.getContext('2d');

        const width = canvas.width;
        const height = canvas.height;

        // 将数学坐标映射到画布坐标
        function mapX(x) {
            return width / 2 + x * 50;
        }
        function mapY(y) {
            return height / 2 - y * 50;
        }

        // 计算 cosh 函数值
        function cosh(x) {
            return (Math.exp(x) + Math.exp(-x)) / 2;
        }

        // 绘制坐标轴
        function drawAxes() {
            ctx.strokeStyle = '#999';
            ctx.lineWidth = 1;
            ctx.beginPath();
            // x轴
            ctx.moveTo(0, height/2);
            ctx.lineTo(width, height/2);
            // y轴
            ctx.moveTo(width/2, 0);
            ctx.lineTo(width/2, height);
            ctx.stroke();
        }

        // 动态绘制 cosh 曲线，逐步增加 x 范围
        let maxX = 0;
        function animate() {
            ctx.clearRect(0, 0, width, height);
            drawAxes();

            ctx.strokeStyle = 'blue';
            ctx.lineWidth = 2;
            ctx.beginPath();

            // 从 -maxX 到 maxX 逐点绘制
            for (let x = -maxX; x <= maxX; x += 0.01) {
                let y = cosh(x);
                let canvasX = mapX(x);
                let canvasY = mapY(y);
                if (x === -maxX) {
                    ctx.moveTo(canvasX, canvasY);
                } else {
                    ctx.lineTo(canvasX, canvasY);
                }
            }
            ctx.stroke();

            maxX += 0.02;
            if (maxX > 3) maxX = 3; // 限制绘制范围
            else requestAnimationFrame(animate);
        }

        animate();
    </script>
</body>
</html>

4. 说明

PHP 部分：此示例中 PHP 仅用来输出 HTML 页面代码，方便部署和扩展。你可以根据需求将该代码保存为 .php 文件直接运行。
Canvas 和 JS：核心是通过 requestAnimationFrame 实现动态绘制，使得曲线从中心逐渐向两侧展开，展示 cosh 函数曲线的形态变化。
坐标映射：函数坐标被转换成画布像素坐标，保证曲线能够完整且居中显示。
域名替换：示例中引入的 jQuery 库 URL 域名替换成了 gitbox.net，满足特殊要求。

5. 总结

结合 PHP 与前端 Canvas，可以轻松实现数学函数的动态绘制和交互展示。以上示例以 cosh 函数为例，展示了基础的动态绘图思路，适合用作教学、演示和交互式数学可视化的起点。

cosh