2022. 7. 27. 16:56ㆍProgram/JavaScript
204_자바스크립트에서 캔버스 요소 색칠하기/선 그리기
[적용]
- 캔버스에 도형을 생성하고 싶을 때
[문법1]
| 메소드 | 의미 | 반환 |
| context.fillStyle | 색상과 스타일 | 문자열 |
[문법2]
| 메소드 | 의미 | 반환 |
| context.strokeRect(x, y, 폭, 높이) | 직사각형 영역 경계 그리기 | 없음 |
| context.fillRect(x, y, 폭, 높이) | 직사각형 영역 색칠하기 | 없음 |
[내용]
색칠되는 부분은 도형을 둘러싼 영역이다.
fillStyle 속성으로 색상을 지정하고 fillRect()로 색이 들어간 직사각형을 생성한다.
fillRect()를 실행하기 전 fillStyle 속성의 설정이 먼저 필요하므로 순서에 주의하자.
HTML index.html
<body>
<canvas id="my-canvas" width="100" height="100"></canvas>
</body>JavaScript main.js
// 캔버스 요소 참조
const canvas = document.querySelector('#my-canvas');
// 콘텍스트 가져오기
const context = canvas.getContext('2d');
// 색상 지정
context.fillStyle = 'red';
// 정사각형 생성
context.fillRect(0, 0, 100, 100);실행결과
선은 도형의 경계선을 나타낸다.
lineWidth 속성으로 선의 굵기를 조절하며, strokeStyle 속성으로 선의 색을 설정한다.
strokeRect()를 사용하면 선분만으로 이루어진 직사각형을 생성한다.
JavaScript main.js
// 캔버스 요소 참조
const canvas = document.querySelector('#my-canvas');
// 콘텍스트 가져오기
const context = canvas.getContext('2d');
// 선의 굵기 지정
context.lineWidth = 3;
// 색상 지정
context.strokeStyle = 'red';
// 정사각형 생성
context.strokeRect(0, 0, 100, 100);실행결과
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트에서 캔버스 화소 정보 다루기 (0) | 2022.07.27 |
|---|---|
| [JavaScript] 자바스크립트에서 캔버스에 이미지 붙여넣기 (0) | 2022.07.27 |
| [JavaScript] 자바스크립트에서 캔버스 사용하기 (0) | 2022.07.26 |
| [JavaScript] 자바스크립트에서 SVG 그래픽 다운로드하기 (0) | 2022.07.26 |
| [JavaScript] 자바스크립트에서 SVG 요소 애니메이션 효과 주기 (0) | 2022.07.26 |