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

效果圖：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com