본문 바로가기

자바스크립트3

p5.js 두 점을 연결하는 곧은 선 그리기 line( ) 화면에 두 점을 연결하는 곧은 선 그리기 이차원 평면 선 stroke( ) 함수로 색상을 지정할 수 있음 선은 면을 갖지 않기 때문에 면채우기 함수인 fill( ) 함수가 적용되지 않음 기본 선 두께 1픽셀 strokeWeight( ) 함수를 사용하여 선 두께를 변경할 수 있음 [문법] 1)line(x1, y1, x2, y2) x1 : 1번째 점의 x 좌표값 y1 : 1번째 점의 y 좌표값 x2 : 2번째 점의 x 좌표값 y2 : 2번째 점의 y 좌표값 2)line(x1, y1, z1, x2, y2, z2) x1 : 1번째 점의 x 좌표값 y1 : 1번째 점의 y 좌표값 z1 : 1번째 점의 z 좌표값 x2 : 2번째 점의 x 좌표값 y2 : 2번째 점의 y 좌표값 z2 : 2번째 점의 z 좌표값 p5... 2020. 11. 21.
p5.js 텍스트 그리기 text( ) 화면에 텍스트 그리기 [문법] 1) text(str, x, y, [x2], [y2] ) str : 표시할 문자 x : 텍스트의 x좌표값 y : 텍스트의 y좌표값 x2 : 텍스트 상자의 너비 y2 : 텍스트 상자의 높이 2) textAlign( ) 함수의 매개변수에 따라 좌표를 기준으로 좌,우,가운데에 텍스트를 그릴 수 있음 3) textFont( ) 함수로 별도 폰트를 지정하지 않을 경우 기본 폰트가 사용됨 4) textSize( ) 함수로 별도 글자 크기를 지정하기 않을 경우 기본 글자 크기가 사용됨 5) fill( ) 함수로 텍스트 색상 변경 가능 6) stroke( ), strokeWeight( ) 함수로 텍스트 윤곽선 변경 가능 예제 1> text( ) 예제 2> text( ), textSize(.. 2020. 11. 21.
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 : 원.. 2020. 11. 20.
반응형

티스토리툴바