p5.js入門教程之圖片加載
更新時間：2018年03月20日 08:34:14 作者：西河某人
這篇文章主要介紹了p5.js入門教程之圖片加載,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
一、preload()函數(shù)與圖片上傳
preload()函數(shù)是一個特殊的函數(shù)，它同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);
}
其中有兩個函數(shù)：
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);
//繪制圖片，后兩個參數(shù)調(diào)整長寬
image(img,200,200,150,150);
}
tint()：圖片染色，括號內(nèi)填入顏色，格式同fill()
image()：第四、五個參數(shù)為圖片長與寬，若不填的話則使用原圖片長寬
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了JS+CSS相對定位實現(xiàn)的下拉菜單,涉及JavaScript結合css的定位技術實現(xiàn)下拉菜單的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
Grid得到選擇行數(shù)據(jù)的方法總結，需要的朋友可以參考下。2011-01-01
js實現(xiàn)以最簡單的方式將數(shù)組元素添加到對象中的方法
下面小編就為大家分享一篇js實現(xiàn)以最簡單的方式將數(shù)組元素添加到對象中的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
今天小編就為大家分享一篇layui自定義工具欄的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了JS中的reduce fold unfold用法，想深入了解JS的同學，一定要看下2021-05-05
這篇文章主要介紹了微信小程序海報繪制示例,海報分享功能在許多應用中應該是很常見的,因為它作為一種常用的應用推廣和拉新的方式,下面我們來通過案例學習如何繪制2024-05-05
Bootstrap實現(xiàn)的經(jīng)典柵格布局效果實例【附demo源碼】
這篇文章主要介紹了Bootstrap實現(xiàn)的經(jīng)典柵格布局效果,結合具體實例形式分析了基于BootStrap實現(xiàn)柵格布局的完整步驟與相關操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
基于HTML5上使用iScroll實現(xiàn)下拉刷新，上拉加載更多
本文主要介紹在HTML5中使用iScroll實現(xiàn)下拉刷新，上拉加載更多數(shù)據(jù)的方法，主要就是寫了兩個自定義函數(shù)pullDownAction和pullUpAction，分別在下拉和上拉的事件中調(diào)用他們。2016-05-05
JavaScript?字符串新增方法?trim()?的使用說明
這篇文章主要介紹了JavaScript字符串新增方法trim()的使用說明，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-09-09
這篇文章主要介紹了如何使用js判斷瀏覽器是否支持html5,需要的朋友可以參考下2014-08-08