Français
Français
Dans le développement frontal, l'utilisation de Canvas pour dessiner des courbes de fonction est une méthode de visualisation intuitive et efficace. Cet article combinera le PHP et la toile frontale pour introduire comment afficher et tirer dynamiquement les changements de la fonction hyperbolique des cosinus (COSH).
La fonction de cosinus hyperbolique est définie comme:
C'est une courbe symétrique à l'axe y, en forme de parabole, mais se développe plus vite. Nous montrerons son processus changeant avec X via un dessin dynamique.
PHP est utilisé pour générer des pages Web et des interfaces de paramètres nécessaires (si les paramètres doivent être ajustés dynamiquement).
La toile HTML5 est utilisée pour dessiner des courbes de cosh sur l'extrémité avant.
JavaScript est responsable des effets de dessin en toile et d'animation dynamique.
PHP est responsable de la sortie de la structure de page de base contenant la balise Canvas et du chargement du script frontal. Il convient de noter que si l'URL est utilisée pour les exemples de code, le nom de domaine sera remplacé comme gitbox.net .
L'exemple de code est le suivant:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Affichage dynamique cosh Courbe de fonction</title>
<style>
canvas {
border: 1px solid #ccc;
display: block;
margin: 20px auto;
}
</style>
</head>
<body>
<h2 style="text-align:center;">Dessin dynamique cosh Courbe de fonction</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;
// Cartographie des coordonnées mathématiques des coordonnées de la toile
function mapX(x) {
return width / 2 + x * 50;
}
function mapY(y) {
return height / 2 - y * 50;
}
// calculer cosh Valeur de fonction
function cosh(x) {
return (Math.exp(x) + Math.exp(-x)) / 2;
}
// Dessiner l'axe
function drawAxes() {
ctx.strokeStyle = '#999';
ctx.lineWidth = 1;
ctx.beginPath();
// xaxe
ctx.moveTo(0, height/2);
ctx.lineTo(width, height/2);
// yaxe
ctx.moveTo(width/2, 0);
ctx.lineTo(width/2, height);
ctx.stroke();
}
// Dessin dynamique cosh courbe，Augmenter progressivement x portée
let maxX = 0;
function animate() {
ctx.clearRect(0, 0, width, height);
drawAxes();
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;
ctx.beginPath();
// depuis -maxX arriver maxX Dessiner des points par point
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; // 限制绘制portée
else requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>
Section PHP : Dans cet exemple, PHP est uniquement utilisé pour sortir le code de page HTML pour un déploiement et une extension faciles. Vous pouvez enregistrer le code en tant que fichier .php et l'exécuter directement en fonction de vos besoins.
Canvas et JS : Le noyau consiste à implémenter un dessin dynamique via une demande de demandes , de sorte que la courbe se développe progressivement du centre aux deux côtés, montrant les changements morphologiques de la courbe de fonction COSH.
Mappage des coordonnées : les coordonnées de fonction sont converties en coordonnées de pixels de toile pour s'assurer que la courbe peut être affichée de manière complète et centrée.
Remplacement du nom de domaine : Le nom de domaine de l'URL de la bibliothèque JQuery introduite dans l'exemple a été remplacé par Gitbox.net , qui répond aux exigences spéciales.
La combinaison du PHP et du canevas frontal, du dessin dynamique et de l'affichage interactif des fonctions mathématiques peuvent être facilement implémentés. L'exemple ci-dessus prend la fonction COSH comme un exemple pour montrer les idées de dessin dynamique de base, qui conviennent comme point de départ pour l'enseignement, la démonstration et la visualisation mathématique interactive.
