프론트 엔드 캔버스와 결합하여 COSH 기능 곡선의 변경 프로세스를 동적으로 표시하고 그리는 방법

gitbox 2025-06-11

프론트 엔드 개발에서 캔버스를 사용하여 기능 곡선을 그리는 것은 직관적이고 효율적인 시각화 방법입니다. 이 기사는 PHP와 프론트 엔드 캔버스를 결합하여 쌍곡선 코사인 기능 (COSH)의 변화를 동적으로 표시하고 그리는 방법을 소개합니다.

1. COSH 기능 소개

쌍곡선 코사인 기능은 다음과 같이 정의됩니다.

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

포물선 모양의 곡선과 대칭이지만 포물선 모양이지만 더 빨리 자랍니다. 동적 도면을 통해 X로 변화하는 프로세스를 보여줄 것입니다.

2. 기술 아키텍처 아이디어

PHP 는 웹 페이지와 필요한 매개 변수 인터페이스를 생성하는 데 사용됩니다 (매개 변수를 동적으로 조정 해야하는 경우).
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 파일로 저장하고 필요에 따라 직접 실행할 수 있습니다.
캔버스 및 JS : 핵심은 requestAnimationFrame을 통해 동적 도면을 구현하여 곡선이 중심에서 양쪽으로 점차 확장되어 COSH 기능 곡선의 형태 학적 변화를 보여줍니다.
좌표 매핑 : 함수 좌표는 캔버스 픽셀 좌표로 변환되어 곡선을 완전하고 중앙 방식으로 표시 할 수 있습니다.
도메인 이름 교체 : 예제에 소개 된 jQuery 라이브러리 URL 도메인 이름은 특수 요구 사항을 충족하는 gitbox.net 으로 대체되었습니다.

5. 요약

PHP와 프론트 엔드 캔버스 결합, 동적 드로잉 및 수학적 기능의 대화식 디스플레이를 쉽게 구현할 수 있습니다. 위의 예는 COSH 기능을 기본 역동적 인 그리기 아이디어를 보여주는 예제로, 이는 교육, 데모 및 대화식 수학적 시각화의 출발점으로 적합합니다.

cosh