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 <🎜 skaliert >0 .
2. Der Effekt der Skalierung des Bildes ist 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); }
image.onload = function(){ context.drawImage(image,50,50); context.transform(0.5,0,0,0.5,150,50); context.drawImage(image,0,0); }
1 und 40,5.
3. Drehen Sie gegen den Uhrzeigersinn, der Effekt ist 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);
sin Drehwinkel, cos Drehwinkel, cosDrehwinkel, sinDrehwinkel.
Im Uhrzeigersinn drehen, der Effekt 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)!