preload()関数の使用と画像アップロード

今回はpreload()関数の使い方と画像アップロードについて、実際の事例を見てみましょう。

preload() 関数は setup() に似た特別な関数で、プログラムの開始時 (setup() の前) に 1 回だけ実行されます。

通常、メディアファイル（画像、サウンド）をロードするためのステートメントをpreload()に置きます。これは、preload()には、ロードされるまでプログラムが開始されない機能があり、ロード時にエラーが発生しないようにするためです。プログラムが実行されます。

画像をロードする前に、まず画像ファイルをアップロードする必要があります。

方法は次のとおりです:

①エディターの左上隅にある小さな三角形をクリックして、ファイルディレクトリを展開します。

②ファイルディレクトリの右上隅にある小さな三角形をクリックし、メニューを展開してファイルを追加します。

③画像ファイルをボックスに直接ドラッグすると、自動的にアップロードされ、アップロード後に閉じることができます。jpgとpng形式の両方がサポートされています。

2. 画像を読み込みます

次に、次のコードを追加します:

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

2 つの関数があります:

imageMode(): 画像の中心を設定します。一般的に使用されるものは CENTER です。 、CORNER、CENTERは中心です、CORNERは左上隅です

image():絵を描きます、image("画像アドレス",x,y)

レンダリング:

3.画像の染色とストレッチ

p5.js には、染色やストレッチなどの便利な関数も用意されています。 コードは次のとおりです:

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(): 画像を染色し、括弧内の色を塗りつぶします。 fill()

image(): 4 番目と 5 番目と同じです。パラメータは画像の長さと幅です。入力されない場合は、元の画像の長さと幅が使用されます。

Iこの記事の事例を読んだ後は、この方法を習得したと考えてください。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

JS 動的追加方法と PHP 動的追加方法の比較

Linux を使用して .vimrc ファイルを繰り返しロードする方法

以上がpreload()関数の使用と画像アップロードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。