上篇有稍微講到preload引入字體的方法，這邊會繼續深入引入檔案的部分，在進行繪圖的時候有時候也會使用到已經製作好的圖檔，而圖檔的引入方式是什麼呢?又有哪些函數可以使用呢?在此篇會依序介紹~

首先我們來複習一下引入的結構

引入程式結構

let pic;

function preload(){
  pic = loadImage('assets/2.jpg');

}

接下來就是實際使用圖檔繪圖的部分了，圖片可以用 imageMode()來定位，image這個參數就比較複雜，下面會補充，總之image是用來實際放入圖檔的函數

• imageMode()
  用來指定圖片位置模式的
• image()
  用來放圖片的，下方會補充他的函數API

let pic;


function preload(){
  pic = loadImage('2.jpg');
}

function setup(){
  createCanvas(windowWidth,windowHeight);
  imageMode(CENTER);
  noLoop()
}

function draw(){
  image(pic, width/2, height/2);

}

image()函數使用守則

image()可以只用五個API，定義如下，簡單來說就是你要從哪個x,y開始放圖，要放多寬多高，圖片是從左上角開始長的，往右往下長高長長

/**
 * 
 * @param {*} img 圖片檔案
 * @param {*} x 起始點X (左上角!)
 * @param {*} y 起始點Y (左上角!)
 * @param {*} width 圖片寬
 * @param {*} height 圖片高
 */


image(img, x, y, [width], [height])

完整的image()總共有9個參數可以使用....，我一開始看到的時候真的覺得超累的，放個圖片有夠麻煩，是在勸大家自己畫嗎?

/**
 * 
 * @param {*} img 圖片檔案
 * @param {*} dx 畫圖案的終點的正方形的起始點X 
 * @param {*} dy 畫圖案的終點的正方形的起始點Y 
 * @param {*} dWidth 終點的正方形寬
 * @param {*} dHeight 終點的正方形高
 * @param {*} sx 該圖片進入終點的正方形的X座標(原本那張圖片要從哪個X點開始放在畫面上)
 * @param {*} sy 該圖片進入終點的正方形的Y座標(原本那張圖片要從哪個Y點開始放在畫面上)
 * @param {*} sWidth 該圖片進入終點的正方形的圖片寬
 * @param {*} sHeight 該圖片進入終點的正方形的圖片高
 */

image(img, dx, dy, dWidth, dHeight, sx, sy, [sWidth], [sHeight])

就算我中文盡量解釋，但應該看了有點想砍我吧XD，這邊用圖片輔助大家，大概意思是你希望圖片的左上角定位在畫布的哪個座標上，既然左上角固定了，那能彈性變動的位置就變成右下角，因以此會定位右下角以及圖片本身寬高，好，大家可以砍我了

小結

放圖片真的超煩超煩，因為要考慮到圖片不能變形，而且如果滿版的情況到底要裁切哪一邊，再加上imageMode()的設定不同，起始點(左上角)也會不同，為此我還寫了一段程式解決這件事，可以指定cover或者contain，object fit的位置也可以指定，想說未來放圖片可以一勞永逸，但在要放上來分享之前發現如果圖片過大(長寬都超過螢幕...登愣)的情況下會有小bug...請大家等我修完...抱歉惹各位