Verwendung der preload()-Funktion und Bild-Upload

Dieses Mal werde ich Ihnen die Verwendung der Funktion preload() und das Hochladen von Bildern vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung der Funktion preload() und das Hochladen von Bildern?

Die Funktion preload() ist eine spezielle Funktion. Sie ähnelt setup() und wird nur einmal am Anfang des Programms, jedoch vor setup(), ausgeführt.

Im Allgemeinen werden wir die Anweisung zum Laden von Mediendateien (Bilder, Sounds) in preload() einfügen, da preload() die Eigenschaft hat, dass das Programm erst startet, wenn es geladen ist, wodurch sichergestellt wird, dass das Programm geladen wird Laufen Da kann man nichts falsch machen.

Bevor wir das Bild laden, müssen wir zuerst die Bilddatei hochladen.

Die Methode ist:

①Klicken Sie auf das kleine Dreieck in der oberen linken Ecke des Editors, um das Dateiverzeichnis zu erweitern.

②Klicken Sie auf das kleine Dreieck in der oberen rechten Ecke des Dateiverzeichnisses, erweitern Sie das Menü und fügen Sie Datei hinzu.

③ Sie können die Bilddatei direkt in das Feld ziehen, sie wird automatisch hochgeladen und Sie können sie nach dem Hochladen schließen. Es werden sowohl JPG- als auch PNG-Formate unterstützt.

2. Laden Sie das Bild

Fügen Sie als Nächstes den Code wie folgt hinzu:

var img; 
function preload(){ 
 //加载图片文件 
 img=loadImage("HearthStone.png"); 
} 
 
function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 //坐标原点设为图片中心 
 imageMode(CENTER); 
 //绘制图片 
 image(img,200,200); 
}

Es gibt zwei Funktionen:

imageMode(): Die häufig verwendeten Funktionen sind CENTER und CORNER ist die Mitte und CORNER ist die obere linke Ecke >image(): Bild zeichnen( „Bildadresse“,x,y)

Rendering:

3 . Färben und Strecken von Bildernp5.js bietet auch einige praktische Funktionen, wie zum Beispiel das Färben und Strecken. Der Code lautet wie folgt:

var img; 
function preload(){ 
 //加载图片文件 
 img=loadImage("HearthStone.png"); 
} 
 
function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 //坐标原点设为图片中心 
 imageMode(CENTER); 
 //图片染色 
 tint(0,255,255); 
 //绘制图片，后两个参数调整长宽 
 image(img,200,200,150,150); 
}

tint(): Dye Geben Sie im Bild die Farbe in den Klammern ein. Das Format ist dasselbe. fill()

image(): Der vierte und fünfte Parameter sind die Bildlänge und -breite. Wenn nicht ausgefüllt, ist dies die ursprüngliche Bildlänge und Breite werden verwendet

Effektbild:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, bitte Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Vergleich zwischen der dynamischen Additionsmethode von JS und der dynamischen Additionsmethode PHP

Wie man Linux wiederholt verwendet .vimrc-Datei laden

Das obige ist der detaillierte Inhalt vonVerwendung der preload()-Funktion und Bild-Upload. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!