結合前端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