[Canvas] 기본 사용법

#<canvas>의 기본 크기는 300x150이다.

[HTML]

<canvas id="my-canvas"></canvas>

 

[CSS]

canvas { background: #efefef; }​

---

# </canvas>(닫는 태그)를 사용하는 이유

canvas를 지원하지 않는 브라우저를 위해 <canvas> 태그 안에 "대체 컨텐츠"를 제공하기 위해서 이다.

<!-- 대체 컨텐츠가 있는 경우 -->
<canvas>
  대체 컨텐츠
</canvas>


<!-- 대체 컨텐츠가 없는 경우 -->
<canvas></canvas>

---

# 렌더링 컨텍스트

<canvas>에 무언가를 표시하기 위해서는, 어떤 스크립트가 랜더링 컨텍스트에 접근하여 그리도록 할 필요가 있다.

 

[HTML]

<canvas id="my-canvas"></canvas>

 

[JS]

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

*getContext()란? <canvas>에 그리기 위한 렌더링 컨텍스트를 제공한다.

 

Q. 렌더링 컨텍스트를 제공한다는게 무슨 말이에요?

일단, 다음 코드를 JS에 이어서 작성해 봅시다.

ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 50, 50);

위 코드가 어떤 용도인지는 모르지만 직역 해 봅시다.

• fillStyle => 채우는 스타일
• fillRect => 채우는 직사각형(rectangular의 줄임말)

배우지는 않았지만, 도형을 만들어주는 기능이 있는 듯 합니다.

console.log(ctx);

console.log를 통해서 ctx가 어떤 프로퍼티를 가지고 있는지 살펴보면

CanvasRenderingContext2D 안에 -> [[Prototype]] 안에 -> fillRect가 있는 것을 확인 할 수 있습니다.

 

결론은...

<canvas>는 JS의 getContext()를 통해서 그리는 방식을 선택하고, 선택한 프로퍼티를 활용 해 <canvas> 위에 이미지를 그려나간다.

---

[공부좌표]

캔버스(Canvas) 기본 사용법