[책] 자바스크립트 코드 레시피 278 - 187일차

캔버스 요소 색칠하기 / 선 그리기

• 캔버스에 도형을 생성하고 싶을 때

구문

context.fillStyle; // 색상과 스타일
context.strokeRect(x, y, 폭, 높이); // 직사각형 영역 경계 그리기
context.fillRect(x, y, 폭, 높이); // 직사각형 영역 색칠하기

설명

색칠되는 부분은 도형을 둘러싼 영역입니다. fillStyle 속성으로 색상을 지정하고, fillRect()로 색이 들어간 직사각형을 생성합니다. fillRect()를 실행하기 전 fillStyle 속성의 설정이 먼저 필요하므로 순서에 주의합시다.

실습

index.html

<canvas id="my-canvas" width="100" height="100"></canvas>

---

script.js

const myCanvas = document.querySelector('#my-canvas');
console.log(myCanvas);
const context = myCanvas.getContext('2d');
context.fillStyle = 'red'; // 면 색상 지정
context.fillRect(0, 0, 100, 100); // 정사각형 생성
context.lineWidth = 10; // 선 굶기
context.strokeStyle = 'blue'; // 선 색상
context.strokeRect(0, 0, 100, 100); // 정사각형 생성