首頁 > web前端 > js教程 > preload()函數與圖片上傳使用

preload()函數與圖片上傳使用

php中世界最好的语言
發布: 2018-06-15 14:34:47
原創
2234 人瀏覽過

這次帶給大家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); 
}
登入後複製
tint():圖片染色,括號內填入顏色,格式同fill()######image():第四、五個參數為圖片長與寬,若不填的話則使用原圖片長寬######效果圖:###### #########我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章! ######推薦閱讀:#########JS動態新增方法與PHP動態新增方法比較###############如何使用Linux重複載入.vimrc檔案#########

以上是preload()函數與圖片上傳使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板