HTML5 Canvas implémente un exemple de démonstration panoramique/zoom/rotation (avec captures d'écran)_html5 compétences du didacticiel

HTML5 Canvas fournit des API pour la traduction, la rotation et la mise à l'échelle graphiques.
Traduction (traduire)
Coordonnée de traduction traduire (x, y) signifie traduire la coordonnée (0,0) en (x, y) et la coordonnée d'origine (0,0) est devient (-x, -y)
Le diagramme est le suivant :

Le point de coordonnées de tout point de coordonnées d'origine p(ox, oy) après translation est p(ox-x, oy -y), où le point (x, y) est la translation
coordonnées du point translation(x, y).
Démonstration du code :

Copier le code

Le code est le suivant :

// traduire consiste à déplacer le point de départ au centre et à revenir dans le coin supérieur gauche
function renderText(width, height, context) {
context.translate(width/ 2, height / 2); are (0, 0)
context.font="18px Arial";
context.fillStyle="blue";
context.fillText("Veuillez appuyer sur pour quitter le jeu",5, 50);
context.translate(-width/2, -height/2); // La traduction restaure la coordonnée (0,0) dans le coin supérieur gauche
context.fillText("Je suis de retour en haut ",5,50) ;
}

Échelle(Échelle)
Échelle(a, b) signifie mettre l'objet à l'échelle le long de l'axe XY à un *x respectivement, taille b*y. L'effet est comme indiqué sur l'image :

Copiez le code

Le code est le suivant :

// traduisez le rectangle
function drawPath(context) {
context.translate(200,200
context.scale(2,2);// Scale); deux fois la taille de la forme originale
context.strokeStyle= "green";
context.beginPath();
context.moveTo(0,40); 🎜>context.lineTo(40, 80);
context.closePath();
context.stroke();
}

Rotation (faire pivoter)
Angle de rotation rotation (Math.PI/8)

La coordonnée p(x, y) avant rotation et la coordonnée correspondante P(rx, ry) après rotation sont Rx = x * cos(-- angle) - y * sin(-angle);
Ry = y * cos(-angle) x * sin(-angle)
La rotation de 90 degrés peut être simplifiée en :
Rx = y;
Ry = -x
Le sens de rotation par défaut dans Canvas est dans le sens des aiguilles d'une montre. Le code de démonstration est le suivant :

Copier le code Le code est le suivant :

// nouveau point. x = x * cos(-angle) -y * sin(-angle),

// nouveau point.y = y * cos(-angle) x * sin(-angle)
function renderRotateText(context) {
context.font="24px Arial"
context.fillStyle="red"
context.fillText("je suis là !!!",5,50 );
/ / rotation de -90 degrés
// context.rotate(-Math.PI/2);
// context.fillStyle="blue"; "je suis là ! !!", -400,30);
// rotation de 90 degrés
context.rotate(Math.PI/2);
context.fillStyle="blue"; 🎜>context.fillText( "je suis là !!!",350,-420);
console.log(Math.sin(Math.PI/2)); tracez 10 lignes
context.fillStyle="green";
for(var i=0; i<4; i ) {
var x = (i 1)*20; (i 1)*60 ;
var newX = y;
var newY = -x;
context.fillRect(newX,newY, 200, 6); >

L'approche habituelle consiste à utiliser la rotation et la translation ensemble, à traduire d'abord les coordonnées (0,0) vers la position centrale
traduire (largeur/2, hauteur/2), puis à utiliser rotation(Math .PI/2) pour terminer la rotation
L'exemple de code est le suivant :

Copier le code


Le code est la suivante :

function saveAndRestoreContext(context ) {

context.save(); context.translate(200,200); ); context.fillStyle="black"; context .fillText("Rotation et traduction de contexte 2D", 10, 10); context.fillText(" Rotation et traduction de contexte 2D", 10, 10);

}

Tout le code JavaScript :






Copiez le code

Le code est le suivant :

var tempContext = null; // variable globale contexte 2D
window.onload = function() {
var canvas = document.getElementById("target");
toile.width = 450 ;
toile.hauteur = 450 ;
if (!canvas.getContext) {
console.log("Canvas non pris en charge. Veuillez installer un navigateur compatible HTML5.");
retour ;
}
// obtenir le contexte 2D du canevas et dessiner l'image
tempContext = canvas.getContext("2d");
// renderText(canvas.width, canvas.height, tempContext);
saveAndRestoreContext(tempContext);
// drawPath(tempContext);
}
// traduire consiste à déplacer le point de départ au centre et à revenir dans le coin supérieur gauche
function renderText(width, height, context) {
context.translate(width / 2, height / 2 );
context.font="18px Arial";
context.fillStyle="bleu";
context.fillText("Veuillez appuyer sur pour quitter le jeu",5,50);
context.translate(-width / 2, -height / 2);
context.fillText("Je suis de retour en haut",5,50);
}
// traduction du rectangle.
function drawPath(context) {
context.translate(200, 200);
context.scale(2,2); // Mettre à l'échelle deux fois la taille de la forme originale
context.StrokeStyle = "green";
context.beginPath();
context.moveTo(0, 40);
context.lineTo(80, 40);
context.lineTo(40, 80);
context.closePath();
context.Stroke();
}
// nouveau point.x = x * cos(-angle) - y * sin(-angle),
// nouveau point.y = y * cos(-angle) x * sin (-angle)
function renderRotateText(context) {
context.font="24px Arial";
context.fillStyle="red";
context.fillText("je suis là !!!",5,50);
// rotation de -90 degrés
// context.rotate(-Math.PI/2);
// context.fillStyle="blue";
// context.fillText("je suis là !!!", -400,30);
// rotation de 90 degrés
context.rotate(Math.PI/2);
context.fillStyle="bleu";
context.fillText("je suis là !!!", 350,-420);
console.log(Math.sin(Math.PI/2));
// tournez à 90 degrés et tracez 10 lignes
context.fillStyle="green";
for(var i=0; i<4; i ) {
var x = (i 1)*20;
var y = (i 1)*60;
var nouveauX = y;
var nouveauY = -x;
context.fillRect(newX, newY, 200, 6);
}
}
function saveAndRestoreContext(context) {
context.save();
context.translate(200 200);
context.rotate(Math.PI/2);
context.fillStyle="noir";
context.fillText("Rotation et traduction du contexte 2D", 10, 10);
context.restore();
context.fillText("Rotation et traduction du contexte 2D", 10, 10);
}