p5.js入門教程之圖片加載
更新時間：2018年03月20日 08:34:14 作者：西河某人
這篇文章主要介紹了p5.js入門教程之圖片加載,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
一、preload()函數(shù)與圖片上傳
preload()函數(shù)是一個特殊的函數(shù)，它同setup()類似，只在程序開始時運行一次，但順序在setup()之前。
一般我們會將媒體文件（圖片、聲音）加載的語句放在preload()中，因為preload()有一個特性就是不加載完畢，程序就不會開始，保證了程序運行時不會出錯。
在加載圖片之前，我們需要先將圖片文件上傳。
方法是：
①點擊編輯器左上角的小三角展開文件目錄。
②點擊文件目錄右上角小三角，展開菜單后Add File。
③可以直接將圖片文件拖到框里，會自動上傳，傳完后關(guān)閉即可，jpg和png格式均支持。
二、加載圖片
接著，添加代碼如下：
var img;
function preload(){
//加載圖片文件
img=loadImage("HearthStone.png");
}
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
//坐標原點設(shè)為圖片中心
imageMode(CENTER);
//繪制圖片
image(img,200,200);
}
其中有兩個函數(shù)：
imageMode()：設(shè)置圖片中心，常用的有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);
//坐標原點設(shè)為圖片中心
imageMode(CENTER);
//圖片染色
tint(0,255,255);
//繪制圖片，后兩個參數(shù)調(diào)整長寬
image(img,200,200,150,150);
}
tint()：圖片染色，括號內(nèi)填入顏色，格式同fill()
image()：第四、五個參數(shù)為圖片長與寬，若不填的話則使用原圖片長寬
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了微信小程序的授權(quán)實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細介紹了如何使用JavaScript實現(xiàn)多行文本溢出省略號的樣式,文中的示例代碼講解詳細,有需要的小伙伴可以參考一下2024-03-03
這篇文章主要為大家詳細介紹了基于three.js實現(xiàn)簡易照片墻效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
列舉所有的方式，看看各瀏覽器的支持差異。方便用js動態(tài)設(shè)置元素css的代碼。需要的朋友可以參考下。2011-08-08
plugin是插件的意思,通常是用于對某個現(xiàn)有的架構(gòu)進行擴展,下面這篇文章主要給大家介紹了關(guān)于webpack?Plugin的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-04-04
下載站控制介紹字數(shù)顯示的腳本 顯示全部 隱藏介紹等功能
有一些下載網(wǎng)站為了整體的統(tǒng)一，盡量的控制軟件介紹的字數(shù)顯示，要不因為字數(shù)介紹太多導致用戶看到下載鏈接比較靠后等原因而一個小功能的實現(xiàn)。2009-09-09
uniapp開發(fā)h5項目引入第三方j(luò)s(sdk)兩種方法
這篇文章主要給大家介紹了關(guān)于uniapp開發(fā)h5項目引入第三方j(luò)s(sdk)的兩種方法,在Uniapp中引入JS文件是一項常見的操作,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了在HTML代碼中使用JavaScript代碼的例子,本文是入門級示例,初學js的同學不要錯過,需要的朋友可以參考下2014-10-10
JS讀秒，在某些情況下還是比較實用的，下面有個簡單的示例，感興趣的朋友可以參考下2013-09-09
javascript動態(tài)添加刪除tabs標簽的方法
這篇文章主要介紹了javascript動態(tài)添加刪除tabs標簽的方法,實例分析了javascript針對tabs標簽的動態(tài)添加與刪除方法,涉及javascript頁面元素的操作技巧,需要的朋友可以參考下2015-07-07