HTML5 -Canvas implementiert Translation/Skaling/Dreh -DEOM -Beispiel (mit Screenshot)

Kommentar: HTML5 -Canvas bietet eine grafische API, die implementiert werden kann, über die Sie einfach Übersetzung, Rotation, Skalierung usw. erkennen können. Lassen Sie mich die spezifische Implementierung von Übersetzungs-, Rotations-, Skalierung- und Referenzbildern mit Ihnen teilen. Interessierte Freunde können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Übersetzen

Übersetzen Sie die Koordinaten übersetzen (x, y) Mittel, um die (0,0) Koordinaten in (x, y) zu übersetzen, und die ursprünglichen (0,0) Koordinaten werden (-x, -y).

Die Abbildung lautet wie folgt:

Der Koordinatenpunkt eines ursprünglichen Koordinatenpunkts P (OX, OY) nach der Translation ist P (OX-X, OY-y), wobei der Punkt (x, y) Translation ist

Punktkoordinate Translate (x, y).

Code Demo:

// Translate verschiebt den Startpunkt in die Mitte und zurück zur oberen linken Ecke

Funktionsrendertext (Breite, Höhe, Kontext) {

context.translate (Breite / 2, Höhe / 2); // Die Koordinaten des Mittelpunkts sind (0, 0)

context.font = "18px arial";

context.fillStyle = "blau";

context.FillText ("Bitte drücken Sie <SEC>, um das Spiel zu beenden", 5,50);

context.translate (-width/2, -Height/2); // Koordinaten der Übersetzungswiederherstellung (0,0) sind die obere linke Ecke

context.FillText ("Ich bin zurück nach oben", 5,50);

}

Skala

Skala (a, b) bedeutet, das Objekt entlang der XY -Achse zu a*x, b*y -Größen zu skalieren. Der Effekt ist in der Abbildung dargestellt:

// das Rechteck übersetzen.

Funktion DrawPath (Kontext) {

context.translate (200.200);

context.scale (2,2); // Skalierung zweimal Größe der ursprünglichen Form

context.strokestyle = "grün";

context.beginPath ();

context.moveto (0,40);

context.lineto (80,40);

context.lineto (40,80);

context.closepath ();

context.stroke ();

}

Drehen

Drehwinkel drehen (math.pi/8)

Die Koordinaten p (x, y) vor der Rotation sind p (rx, ry) nach der entsprechenden Rotation sind

Rx = x * cos (-angel)-y * sin (-angel);

Ry = y * cos (-angel) + x * sin (-angel);

Eine Rotation von 90 Grad kann vereinfacht werden zu:

Rx = y;

Ry = -x;

Die Standarddrehrichtung in Leinwand ist im Uhrzeigersinn. Der Demo -Code lautet wie folgt:

// neuer Punkt.x = x * cos (-angle) -y * sin (-angle),

// neuer Punkt.y = y * cos (-angle) +x * sin (-angel)

Funktion RendErrotateText (Kontext) {

context.font = "24px arial";

context.fillStyle = "rot";

context.fillText ("Ich bin hier !!!", 5,50);

// -90 Grad drehen

// context.rotate (-math.pi/2);

// context.fillStyle = "Blue";

// context.fillText ("Ich bin hier !!!", -400,30);

// 90 Grad drehen

context.rotate (math.pi/2);

context.fillStyle = "blau";

context.fillText ("Ich bin hier !!!", 350, -420);

console.log (math.sin (math.pi/2));

// Rotae 90 Grad und 10 Linien zeichnen

context.fillstyle = "green";

für (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);

}

}

Die übliche Praxis besteht darin, Rotation und Übersetzung zu verwenden und zunächst die Koordinaten (0,0) in die Mittelposition zu übersetzen.

Übersetzen Sie (Breite/2, Höhe/2) und drehen Sie dann (math.pi/2), um die Rotation zu vervollständigen

Das Codebeispiel lautet wie folgt:

Funktion SareAneDrestoreContext (Kontext) {

context.save ();

context.translate (200.200);

context.rotate (math.pi/2);

context.fillStyle = "schwarz";

context.FillText ("2D -Kontext drehen und übersetzen", 10, 10);

context.restore ();

context.FillText ("2D -Kontext drehen und übersetzen", 10, 10);

}

Alle JavaScript -Code:

var tempcontext = null; // Globale variable 2D -Kontext

window.onload = function () {

var canvas = document.getElementById ("Ziel");

canvas.width = 450;

Canvas.Height = 450;

if (! canvas.getContext) {

console.log ("Canvas nicht unterstützt. Bitte installieren Sie einen HTML5 -kompatiblen Browser.");

zurückkehren;

}

// Erhalten Sie einen 2D -Kontext von Leinwand und zeichnen Sie Bild

tempcontext = canvas.getContext ("2d");

// RenderText (Canvas.width, canvas.height, tempcontext);

seareNDrestoreContext (tempcontext);

// DrawPath (tempcontext);

}

// Translate verschiebt den Startpunkt in die Mitte und zurück zur oberen linken Ecke

Funktionsrendertext (Breite, Höhe, Kontext) {

context.translate (Breite / 2, Höhe / 2);

context.font = "18px arial";

context.fillStyle = "blau";

context.FillText ("Bitte drücken Sie <SEC>, um das Spiel zu beenden", 5,50);

context.translate (-width/2, -Height/2);

context.FillText ("Ich bin zurück nach oben", 5,50);

}

// das Rechteck übersetzen.

Funktion DrawPath (Kontext) {

context.translate (200, 200);

context.scale (2,2); // skalieren Sie zweimal Größe der ursprünglichen Form

context.strokestyle = "grün";

context.beginPath ();

context.moveto (0, 40);

context.lineto (80, 40);

context.lineto (40, 80);

context.closepath ();

context.stroke ();

}

// neuer Punkt.x = x * cos (-angle)-y * sin (-angle),

// neuer Punkt.y = y * cos (-angle) + x * sin (-angel)

Funktion RendErrotateText (Kontext) {

context.font = "24px arial";

context.fillStyle = "rot";

context.fillText ("Ich bin hier !!!", 5,50);

// -90 Grad drehen

// context.rotate (-math.pi/2);

// context.fillStyle = "Blue";

// context.fillText ("Ich bin hier !!!", -400,30);

// 90 Grad drehen

context.rotate (math.pi/2);

context.fillStyle = "blau";

context.fillText ("Ich bin hier !!!", 350, -420);

console.log (math.sin (math.pi/2));

// Rotae 90 Grad und 10 Linien zeichnen

context.fillstyle = "green";

für (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);

}

}

Funktion SareAneDrestoreContext (Kontext) {

context.save ();

context.translate (200.200);

context.rotate (math.pi/2);

context.fillStyle = "schwarz";

context.FillText ("2D -Kontext drehen und übersetzen", 10, 10);

context.restore ();

context.FillText ("2D -Kontext drehen und übersetzen", 10, 10);

}