p5.js如何實現圖片加載

這篇文章主要為大家展示了“p5.js如何實現圖片加載”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“p5.js如何實現圖片加載”這篇文章吧。

一、preload()函數與圖片上傳

preload()函數是一個特殊的函數，它同setup()類似，只在程序開始時運行一次，但順序在setup()之前。

一般我們會將媒體文件（圖片、聲音）加載的語句放在preload()中，因為preload()有一個特性就是不加載完畢，程序就不會開始，保證了程序運行時不會出錯。

在加載圖片之前，我們需要先將圖片文件上傳。

方法是：

①點擊編輯器左上角的小三角展開文件目錄。

②點擊文件目錄右上角小三角，展開菜單后Add File。

③可以直接將圖片文件拖到框里，會自動上傳，傳完后關閉即可，jpg和png格式均支持。

二、加載圖片

接著，添加代碼如下：

var img; 
function preload(){ 
 //加載圖片文件 
 img=loadImage("HearthStone.png"); 
} 
 
function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 //坐標原點設為圖片中心 
 imageMode(CENTER); 
 //繪制圖片 
 image(img,200,200); 
}

其中有兩個函數：

imageMode()：設置圖片中心，常用的有CENTER、CORNER，CENTER為中心，CORNER為左上角

image()：繪制圖片，image("圖片地址",x,y)

效果圖：

三、圖片染色與拉伸

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()：第四、五個參數為圖片長與寬，若不填的話則使用原圖片長寬

效果圖：

以上是“p5.js如何實現圖片加載”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！