Commentaire: HTML5 Canvas fournit une API graphique qui peut être implémentée, à travers laquelle vous pouvez simplement réaliser la traduction, la rotation, la mise à l'échelle, etc. Permettez-moi de partager avec vous l'implémentation spécifique des images de traduction, de rotation, d'échelle et de référence. Les amis intéressés peuvent y faire référence. J'espère que cela vous sera utile.
HTML5 Canvas fournit une API pour implémenter la traduction des graphiques, la rotation et la mise à l'échelle.Traduire
Traduire les coordonnées traduire (x, y) signifie traduire les coordonnées (0,0) en (x, y), et les coordonnées originales (0,0) deviennent (-x, -y)
L'illustration est la suivante:
Le point de coordonnée de tout point de coordonnée d'origine P (OX, OY) après la traduction est P (OX-X, OY-Y), où le point (x, y) est la traduction
Les coordonnées ponctuelles traduisent (x, y).
Démo de code:
// traduire est de déplacer le point de départ vers Centera et de retour dans le coin supérieur gauche
fonction rendetText (largeur, hauteur, contexte) {
context.translate (largeur / 2, hauteur / 2); // Les coordonnées du point central sont (0, 0)
context.font = "18px arial";
context.fillStyle = "Blue";
context.fillText («Veuillez appuyer sur <esc> pour quitter le jeu», 5,50);
context.translate (-Width / 2, -Height / 2); // Les coordonnées de récupération de traduction (0,0) sont le coin supérieur gauche
context.fillText («Je suis de retour en haut», 5,50);
}
Échelle
L'échelle (A, B) signifie à l'échelle de l'objet le long de l'axe xy à une tailles A * x, b * y respectivement. L'effet est illustré sur la figure:
// traduit le rectangle.
Fonction DrawPath (Context) {
context.translate (200 200);
context.scale (2,2); // échelle deux fois la taille de la forme d'origine
context.strokestyle = "green";
context.beginPath ();
context.moveto (0,40);
context.lineto (80,40);
context.lineto (40,80);
context.closepath ();
context.stroke ();
}
Tourner
Angle de rotation Rotation (math.pi / 8)
Les coordonnées p (x, y) avant la rotation sont p (rx, ry) après la rotation correspondante
Rx = x * cos (-ang) - y * sin (-ang);
Ry = y * cos (-ang) + x * sin (-ang);
La rotation de 90 degrés peut être simplifiée à:
Rx = y;
Ry = -x;
La direction de rotation par défaut dans Canvas est dans le sens des aiguilles d'une montre. Le code de démonstration est le suivant:
// new Point.x = x * cos (-ang) -y * sin (-ang),
// new Point.y = y * cos (-ang) + x * sin (-ang)
Fonction RenderrotateText (Context) {
context.font = "24px arial";
context.fillStyle = "Red";
context.fillText ("Je suis ici !!!", 5,50);
// Rotation -90 degré
// context.rotate (-math.pi / 2);
// context.fillStyle = "Blue";
// context.fillText ("Je suis ici !!!", -400,30);
// tourne à 90 degrés
context.rotate (math.pi / 2);
context.fillStyle = "Blue";
context.fillText ("Je suis ici !!!", 350, -420);
console.log (math.sin (math.pi / 2));
// rotae 90 degrés et tracez 10 lignes
context.fillStyle = "Green";
pour (var i = 0; i <4; i ++) {
var x = (i + 1) * 20;
var y = (i + 1) * 60;
var newx = y;
var newy = -x;
context.fillrect (Newx, Newy, 200, 6);
}
}
La pratique habituelle consiste à utiliser la rotation et la traduction, traduire d'abord les coordonnées (0,0) en position centrale.
traduire (largeur / 2, hauteur / 2) puis tourner (math.pi / 2) pour terminer la rotation
L'exemple de code est le suivant:
fonction SAVEANDRESTORECONTEXT (Context) {
context.save ();
context.translate (200 200);
context.rotate (math.pi / 2);
context.fillStyle = "Black";
context.fillText ("Le contexte 2D tourne et traduit", 10, 10);
context.Restore ();
context.fillText ("Le contexte 2D tourne et traduit", 10, 10);
}
Tout le code JavaScript:
var tempContext = null; // Contexte 2D variable globale
window.onload = function () {
var canvas = document.getElementById ("Target");
Canvas.Width = 450;
Canvas.Height = 450;
if (! canvas.getContext) {
Console.log ("Canvas non pris en charge. Veuillez installer un navigateur compatible HTML5.");
retour;
}
// Obtenez un contexte 2D de toile et dessiner l'image
tempContext = canvas.getContext ("2d");
// RenderText (canvas.width, canvas.height, tempContext);
SAVEANDRESTORECONTEXT (TempContext);
// DrawPath (tempContext);
}
// traduire est de déplacer le point de départ vers Centera et de retour vers le coin supérieur gauche
fonction rendetText (largeur, hauteur, contexte) {
context.translate (largeur / 2, hauteur / 2);
context.font = "18px arial";
context.fillStyle = "Blue";
context.fillText («Veuillez appuyer sur <esc> pour quitter le jeu», 5,50);
context.translate (-Width / 2, -Height / 2);
context.fillText («Je suis de retour en haut», 5,50);
}
// traduit le rectangle.
Fonction DrawPath (Context) {
context.translate (200, 200);
context.scale (2,2); // échelle deux fois la taille de la forme d'origine
context.strokestyle = "green";
context.beginPath ();
context.moveto (0, 40);
context.lineto (80, 40);
context.lineto (40, 80);
context.closepath ();
context.stroke ();
}
// new Point.x = x * cos (-ang) - y * sin (-ang),
// new Point.y = y * cos (-ang) + x * sin (-ang)
Fonction RenderrotateText (Context) {
context.font = "24px arial";
context.fillStyle = "Red";
context.fillText ("Je suis ici !!!", 5,50);
// Rotation -90 degré
// context.rotate (-math.pi / 2);
// context.fillStyle = "Blue";
// context.fillText ("Je suis ici !!!", -400,30);
// tourne à 90 degrés
context.rotate (math.pi / 2);
context.fillStyle = "Blue";
context.fillText ("Je suis ici !!!", 350, -420);
console.log (math.sin (math.pi / 2));
// rotae 90 degrés et tracez 10 lignes
context.fillStyle = "Green";
pour (var i = 0; i <4; i ++) {
var x = (i + 1) * 20;
var y = (i + 1) * 60;
var newx = y;
var newy = -x;
context.fillrect (Newx, Newy, 200, 6);
}
}
fonction SAVEANDRESTORECONTEXT (Context) {
context.save ();
context.translate (200 200);
context.rotate (math.pi / 2);
context.fillStyle = "Black";
context.fillText ("Le contexte 2D tourne et traduit", 10, 10);
context.Restore ();
context.fillText ("Le contexte 2D tourne et traduit", 10, 10);
}