フロントエンドキャンバスと組み合わせて、COSH関数曲線の変更プロセスを動的に表示および描画する方法

gitbox 2025-06-11

フロントエンド開発では、キャンバスを使用して関数曲線を描画することは、直感的で効率的な視覚化方法です。この記事では、PHPとフロントエンドのキャンバスを組み合わせて、双曲線コサイン関数（COSH）の変化を動的に表示および描画する方法を紹介します。

1。COSH関数の紹介

双曲線コサイン機能は、次のように定義されています。

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

これは、放物線のように形作られたY軸と対称的な曲線ですが、より速く成長します。動的描画を介してXを使用して、その変化するプロセスを示します。

2。技術的なアーキテクチャのアイデア

PHPは、Webページと必要なパラメーターインターフェイスを生成するために使用されます（パラメーターを動的に調整する必要がある場合）。
HTML5キャンバスは、フロントエンドでCOSH曲線を描くために使用されます。
JavaScriptは、キャンバスの描画と動的なアニメーション効果を担当します。

3。PHPは基本ページを生成します

PHPは、キャンバスタグを含む基本ページ構造を出力し、フロントエンドスクリプトをロードする責任があります。 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 and JS ：Coreは、 RequestAnimationFrameを介して動的図面を実装することであり、COSH関数曲線の形態学的変化を示す曲線が中心から両側に徐々に拡張されるようにします。
座標マッピング：関数座標は、Canvas Pixel座標に変換され、曲線を完全かつ中心的な方法で表示できるようにします。
ドメイン名の交換：この例で導入されたjQueryライブラリURLドメイン名は、特別な要件を満たすgitbox.netに置き換えられました。

5。概要

PHPとフロントエンドキャンバスを組み合わせて、数学関数の動的な描画とインタラクティブな表示を簡単に実装できます。上記の例では、COSH機能を、教育、デモンストレーション、インタラクティブな数学的視覚化の出発点として適した基本的な動的な描画のアイデアを示す例として採用しています。

cosh