Maison > interface Web > js tutoriel > Utilisation de la fonction preload() et téléchargement d'images

Utilisation de la fonction preload() et téléchargement d'images

php中世界最好的语言
Libérer: 2018-06-15 14:34:47
original
2238 Les gens l'ont consulté

Cette fois, je vais vous présenter l'utilisation de la fonction preload() et le téléchargement d'images. Quelles sont les précautions à prendre pour utiliser la fonction preload() et le téléchargement d'images ? Voici un cas pratique, jetons un oeil.

La fonction preload() est une fonction spéciale. Elle est similaire à setup() et ne s'exécute qu'une seule fois au début du programme, mais avant setup().

Généralement, nous mettrons l'instruction de chargement des fichiers multimédias (images, sons) dans preload(), car preload() a une caractéristique selon laquelle le programme ne démarrera pas tant qu'il n'est pas chargé, garantissant ainsi que le programme est Je ne peux pas me tromper.

Avant de charger l'image, nous devons d'abord télécharger le fichier image.

La méthode est la suivante :

①Cliquez sur le petit triangle dans le coin supérieur gauche de l'éditeur pour développer le répertoire de fichiers.

② Cliquez sur le petit triangle dans le coin supérieur droit du répertoire de fichiers, développez le menu et ajoutez un fichier.

③ Vous pouvez faire glisser le fichier image directement dans la boîte, il sera automatiquement téléchargé et vous pourrez le fermer après le téléchargement. Les formats jpg et png sont pris en charge.

2. Chargez l'image

Ensuite, ajoutez le code comme suit :

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

Il existe deux fonctions :

imageMode() : Définissez le centre de l'image. Les fonctions couramment utilisées sont CENTER et CORNER est le centre et CORNER est le coin supérieur gauche.

image() : Dessinez l'image. image("adresse de l'image",x,y)

Rendu :

3. Teinture et étirement d'image

p5.js fournit également des fonctions pratiques, telles que la teinture et l'étirement. Le code est le suivant :

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); 
}
Copier après la connexion
teinture. () : Teinture de l'image, remplir les parenthèses. La couleur et le format sont les mêmes que fill()

image() : les quatrième et cinquième paramètres sont la longueur et la largeur de l'image. S'ils ne sont pas remplis, l'image originale. la longueur et la largeur seront utilisées

Image d'effet :

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comparaison entre la méthode d'ajout dynamique JS et la méthode d'ajout dynamique PHP

Comment utiliser Linux pour répéter charger le fichier .vimrc

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal