Vorläufige Studiennotizen zu Html5 Canvas (13) – Bildtransformation

                Xiaoman (Bill Man) persönliche Originalkreation, willkommen zum Nachdruck, bitte geben Sie die Adresse für den Nachdruck an, Xiaoman (Bill Man) Spaltenadresse http://www.php.cn/

Diese Vorgänge in der vorherigen Grafiktransformation Statuswerte sind bei Bildoperationen immer noch nützlich. Obwohl Operationen wie Zoomen während des Zeichnens implementiert werden können, handelt es sich immer noch um eine Implementierungsmethode

1, der Effekt ist wie folgt:

Der Code lautet wie folgt:

var image = new Image();
image.src = "grossini.png";
image.onload = function(){
   context.drawImage(image,50,50);
   context.translate(100,100);
   context.drawImage(image,50,50);
}

Wie bei der Grafikoperation geben wir nach der Übersetzung The an Koordinatenwerte werden entsprechend versetzt, und das Gleiche kann auch mit der Matrixmethode erreicht werden. Der Code lautet wie folgt:

var image = new Image();
image.src = "grossini.png";
image.onload = function(){
   context.drawImage(image,50,50);
   context.transform(1,0,0,1,100,100);
   //context.transform(0,1,1,0,100,100);
   context.drawImage(image,50,50);
}

In ähnlicher Weise ist der Effekt der ungeprüften Transformation und der ungeprüften Transformation ähnlich , die ersten vier Parameter sind für die Skalierung und Rotation insgesamt verantwortlich, und die letzten beiden Parameter sind die Übersetzung. Die ersten vier Parameter sind 1, 4 ist eine Gruppe zur Steuerung der Skalierung, 2, 3 ist eine Gruppe zur Steuerung der Rotation, 1 und 2 sind x Werte, 3 und 4 ist der Wert von y, 5 und 6 sind die Übersetzungen von x, y. Der Grund dafür ist, dass 1 , 4 in dieser Gruppe und 2, 3in dieser Gruppe schreiben 1, da wir sicherstellen möchten, dass das Rechteck nicht skaliert wird. Wenn es 0 ist, wird die Größe auf 0 .

2. Der Effekt der Skalierung des Bildes

ist wie folgt:

Code wie folgt:

image.onload = function(){
   context.drawImage(image,50,50);
   context.translate(150,50);
   context.scale(0.5,0.5);
   context.drawImage(image,0,0);
}

In ähnlicher Weise müssen Sie die Übersetzung und Skalierung koordinieren, da nach der Skalierung auch Ihre Koordinatenposition entsprechend skaliert wird. Zur Implementierung entsprechender Operationen können auch Matrixmethoden verwendet werden.

image.onload = function(){
   context.drawImage(image,50,50);
   context.transform(0.5,0,0,0.5,150,50);
   context.drawImage(image,0,0);
}

ist die Skalierung der beiden Parameter

1 und 40,5.

3. Drehen Sie

gegen den Uhrzeigersinn, der Effekt ist wie folgt:

Der Der Code lautet wie folgt:

context.drawImage(image,50,50);
context.transform(-Math.sin(Math.PI/4),Math.cos(Math.PI/4),Math.cos(Math.PI/4),Math.sin(Math.PI/4),150,50);
context.drawImage(image,0,0);

Die beiden Parametersätze sind negativer

sin Drehwinkel, cos Drehwinkel, cosDrehwinkel, sinDrehwinkel.

Im Uhrzeigersinn drehen, der Effekt ist wie folgt:

Der Code ist wie folgt

;

context.drawImage(image,50,50);            
context.transform(Math.cos(Math.PI/4),Math.sin(Math.PI/4),-Math.sin(Math.PI/4),Math.cos(Math.PI/4),150,50);
context.drawImage(image,0,0);

两组参数分别为cos旋转角，sin旋转角，负的sin旋转角，cos旋转角。

 以上就是Html5 Canvas初探学习笔记(13) -图片变换的内容，更多相关内容请关注PHP中文网（www.php.cn）！