Deutsch
Deutsch
In der Front-End-Entwicklung ist die Verwendung von Canvas zum Zeichnen von Funktionskurven eine intuitive und effiziente Visualisierungsmethode. Dieser Artikel kombiniert PHP- und Front-End-Leinwand, um die dynamische Anzeige und Zeichnung der Änderungen der hyperbolischen Cosinus-Funktion (COSH) einzuführen.
Die hyperbolische Kosinusfunktion ist definiert als:
Es ist eine Kurve, die symmetrisch für die Y-Achse ist, die wie eine Parabola geformt ist, aber schneller wächst. Wir werden seinen sich ändernden Prozess mit X durch dynamische Zeichnung zeigen.
PHP wird verwendet, um Webseiten und erforderliche Parameterschnittstellen zu generieren (wenn Parameter dynamisch angepasst werden müssen).
HTML5 -Leinwand wird verwendet, um COSH -Kurven am vorderen Ende zu zeichnen.
JavaScript ist verantwortlich für die Zeichnung von Leinwand und dynamische Animationseffekte.
PHP ist dafür verantwortlich, die grundlegende Seitenstruktur auszugeben, die das Canvas-Tag enthält und das Front-End-Skript lädt. Es ist zu beachten, dass der Domänenname, wenn die URL für Code -Beispiele verwendet wird, als Gitbox.net ersetzt wird.
Der Beispielcode lautet wie folgt:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Dynamisches Display cosh Funktionskurve</title>
<style>
canvas {
border: 1px solid #ccc;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<h2 style="text-align:center;">Dynamische Zeichnung cosh Funktionskurve</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;
// Karte mathematische Koordinaten zu Canvas -Koordinaten
function mapX(x) {
return width / 2 + x * 50;
}
function mapY(y) {
return height / 2 - y * 50;
}
// berechnen cosh Funktionswert
function cosh(x) {
return (Math.exp(x) + Math.exp(-x)) / 2;
}
// Zeichne die Achse
function drawAxes() {
ctx.strokeStyle = '#999';
ctx.lineWidth = 1;
ctx.beginPath();
// xAchse
ctx.moveTo(0, height/2);
ctx.lineTo(width, height/2);
// yAchse
ctx.moveTo(width/2, 0);
ctx.lineTo(width/2, height);
ctx.stroke();
}
// Dynamische Zeichnung cosh Kurve，Allmählich erhöhen x Umfang
let maxX = 0;
function animate() {
ctx.clearRect(0, 0, width, height);
drawAxes();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;
ctx.beginPath();
// aus -maxX ankommen maxX Punkte für Punkt zeichnen
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; // 限制绘制Umfang
else requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
PHP -Abschnitt : In diesem Beispiel wird PHP nur zum Ausgabe von HTML -Seitencode für die einfache Bereitstellung und Erweiterung verwendet. Sie können den Code als .php -Datei speichern und ihn direkt entsprechend Ihren Anforderungen ausführen.
Leinwand und JS : Der Kern besteht darin, dynamisches Zeichnen durch RequestAnimationFrame zu implementieren, so dass die Kurve allmählich vom Zentrum zu beiden Seiten erweitert wird und die morphologischen Veränderungen der COSH -Funktionskurve zeigt.
Koordinatenzuordnung : Funktionskoordinaten werden in Canvas -Pixelkoordinaten konvertiert, um sicherzustellen, dass die Kurve vollständig und zentriert angezeigt werden kann.
Ersatz für Domänenname : Der im Beispiel eingeführte Domänenname der JQuery Library wurde durch Gitbox.net ersetzt, das den besonderen Anforderungen entspricht.
Die Kombination von PHP- und Front-End-Leinwand, dynamisches Zeichnen und interaktiver Anzeige mathematischer Funktionen kann einfach implementiert werden. Das obige Beispiel nimmt die COSH -Funktion als Beispiel, um die grundlegenden dynamischen Zeichnungsideen anzuzeigen, die als Ausgangspunkt für Lehren, Demonstration und interaktive mathematische Visualisierung geeignet sind.
