這次帶給大家preload()函數與圖片上傳使用,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); }
以上是preload()函數與圖片上傳使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!