canvas - 1

wkdgusrhkd·2021년 3월 10일
0

canvas

목록 보기
1/2
post-thumbnail

canvas 기초

첫 시작

Canvas APIJavaScriptHTML canvas 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용됩니다.

Canvas API는 주로 2D 그래픽에 중점을 두고 있습니다. WebGL API 또한 canvas 엘리먼트를 사용하며, 하드웨어 가속 2D3D 그래픽을 그립니다.

- MDN Web Docs -

HTML<canvas></canvas> 태그로 시작을 합니다. classid를 지정 할 수도 있습니다.

<canvas id="canvas"></canvas>

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

script에서 canvas를 불러옵니다.
getContext()context를 지정해주는데 이는 렌더링 될 그리기의 대상을 가리킵니다.

모든 canvas 작업은 이것으로 시작합니다.

색이 채워진 사각형 그리기, 채우기 색 지정

ctx.fillStyle = 'pink';
ctx.fillStyle = '2d2d2d';
ctx.fillStyle = 'rgba(255, 232, 232, .7);

.fillStyle을 통해 채우기 색을 지정 해 줄 수 있습니다.

ctx.fillRect(x, y, width, height);

ctx.fillRect();를 통해 사각형을 그릴 수 있습니다.

사각형 모양으로 지우기

clearRect(x, y, width, height);를 사용하면 사각형 모양으로 캔버스를 지울 수 있습니다.

선으로 색이 채워지지 않은 사각형 그리기

ctx.strokeStyle = 'color';
ctx.strokeRect(x, y, width, height);

로 각각 선의 색과 사각형의 위치, 크기를 지정 할 수 있습니다.

profile
프론트!

0개의 댓글