Vorläufige Studiennotizen zu Html5 Canvas (12) – Bildzuschnitt und -anpassung

Im vorherigen Artikel ging es um die beiden Vorgänge zum Lesen und Exportieren von Bildern. Nach dem Lesen des Bildes verwenden wir drawImage mit jeweils nur drei Parametern >5 Parameter und 9 Parameter von drawImage, tatsächlich ist die letzte Funktion drawRegion in j2me. Führen Sie zunächst die Funktion 5 Parameter drawImage ein, mit der die Bildgröße angepasst werden kann. Sehen Sie sich zunächst den folgenden Effekt an:

Der Code lautet wie folgt folgt:

In der Funktion

onload

des Bildes habe ich vier

var image = new Image();
image.src = "grossini.png";
image.onload = function(){
context.drawImage(image,50,50);
context.drawImage(image,100,50,image.width * 1.5,image.height * 1.5);
context.drawImage(image,200,50,image.width * 0.5,image.height * 0.5);
context.drawImage(image,250,50,160,50);
}

drawImage geschrieben, davon die letzten drei sind 5 Parameter, der Effekt ist sehr offensichtlich, einer vergrößert das Bild 1,5 Mal und der andere verkleinert das Bild auf 0,5, außerdem liegt eine ungleichmäßige Skalierung vor. Mit anderen Worten, die letzten beiden Parameter sind die Breite und Höhe des Bildes, das wir zeichnen möchten. Unter normalen Umständen handelt es sich natürlich nur um eine proportionale Skalierung. Sie können auch andere Breiten angeben, z. B. den Effekt des letzten Satzes. Das Folgende ist eine Einführung in die Funktion drawImage. Schauen wir uns zunächst die Parametereinführung an:

drawImage (Bild, Bild) Die Startkoordinaten x

des Zuschnitts im Bild, die Startkoordinaten y des Zuschnitts im Bild, die Breite des Zuschneidebereichs, die Höhe des Zuschneidebereichs, also Zeichnungsposition x-Koordinaten, gezeichnete Position y-Koordinaten , Breite der gezeichneten Figur, Höhe der gezeichneten Figur) Sehen Sie sich zunächst den folgenden Effekt an:

Der Code lautet wie folgt:

Diese Funktion verfügt über eine zusätzliche Zuschneidefunktion als die vorherige, die es uns ermöglicht, Bilder beliebig zuzuschneiden. Sie wird häufig auf diese Weise verwendet. Der Effekt ist wie folgt:

var image = new Image();
image.src = "grossini.png";
image.onload = function(){
context.drawImage(image,50,50);
context.drawImage(image,0,0,image.width,image.height / 3,100,50,image.width * 1.5,image.height * 0.5);
context.drawImage(image,0,image.height / 3,image.width,image.height * 2/ 3,180,50,image.width * 1.5,image.height);

Der Code lautet wie folgt:

Dieses Beispiel zeigt, dass das Zuschneiden einfacher kleiner Bilder aus einer Liste großer Bilder eine der Verwendungsmöglichkeiten des Zuschneidens ist.

Das Obige ist der Inhalt von Html5 Canvas Preliminary Study Notes (12) – Bildzuschnitt und -anpassung. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

var test = new Image();
test.src = "test.png";
test.onload = function(){
context.drawImage(test,50,180);
context.drawImage(test,67 * 3,0,67,121,50,280,67,121);
}