Heim > Web-Frontend > H5-Tutorial > Hauptteil

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

黄舟
Freigeben: 2017-02-28 16:09:01
Original
1259 Leute haben es durchsucht

                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);
}
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

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 <🎜 skaliert >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);
}
Nach dem Login kopieren
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);
}
Nach dem Login kopieren
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);
Nach dem Login kopieren
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);
Nach dem Login kopieren

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

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



Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!