p5.js入門教程之圖片載入，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()：第四、五個參數為圖片長與寬，若不填的話則使用原圖片長寬

：

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。