p5.js 이미지 불러오기 image( )

• 캔버스에 이미지를 불러오는 함수
• 원본 이미지 크기 설정을 통해 이미지의 일부만을 화면상에 표현할 수 있음

---

[함수]

 

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

• img : p5.Image, p5.Element : 화면에 나타낼 이미지
• x : 왼쪽 위 모서리의 x 좌표값
• y : 왼쪽 위 모서리의 y 좌표값
• width : 이미지 너비값 (선택사항)
• height : 이미지 높이값 (선택사항)

 

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

• dx : 원본 이미지를 배치할 사각형(?)의 x좌표값
• dy : 원본 이미지를 배치할 사각형의 y좌표값
• dWithe : 원본 이미지 배치할 사각형의 너비값
• dHeight : 원본 이미지 배치할 사각형의 높이값
• sx : 배치할 원본 이미지 일부의 x좌표값
• sy : 배치할 원본 이미지 일부의 y좌표값
• sWidth : 배치할 원본 이미지 일부의 너비값 (선택사항)
• sHeight : 배치할 이미지 일부의 높이값 (선택사항)

---

---

 

p5.js 캔버스에 이미지 넣기, image( ) 함수