[HTML] Canvas

<canvas> 요소는 HTML page의 비트맵 영역을 정의한다.

Canvas API를 사용하면 JavaScript가 캔버스에 그래픽을 그릴 수 있다.

Canvas API는 색상, 회전, 투명도 및 기타 픽셀 조작을 사용하여 모양, 선, 곡선, 상자, 텍스트 및 이미지를 그릴 수 있다.

<canvas id="myCanvas" width="300" height="150"></canvas>

 

HTML DOM 메소드를 <canvas>사용하여 요소에 액세스할 수 있습니다. getElementById()

캔버스에 그리려면 2D 컨텍스트 객체를 생성해야 한다.

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

HTML <canvas> 요소 자체에는 그리기 기능이 없다.
그래픽을 그리려면 JavaScript를 사용해야 한다.
이 getContext() 메서드는 그리기 위한 도구(메서드)가 포함된 개체를 반환한다.

---

캔버스에 그리기

2D 컨텍스트를 생성한 후 캔버스에 그림을 그릴 수 있다.

 

fillRect() 메서드는 위치 20, 20에 왼쪽 상단 모서리가 있는 검은색 직사각형을 그린다. 직사각형 너비는 150px, 높이는 100px이다.

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

ctx.fillRect(20,20,150,100);

---

색상 사용

fillStyle 속성은 그리기 객체의 채우기 색상을 설정한다.

const myCanvas = document.getElementById("myCanvas");
const ctx = myCanvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(20,20,150,100);

<canvas> 메소드를 사용하여 새 요소를 생성 document.createElement()하고 기존 HTML 페이지에 요소를 추가할 수도 있다.

const myCanvas = document.getElementById("myCanvas");
document.body.appendChild(myCanvas);
const ctx = myCanvas.getContext("2d");

ctx.fillStyle = "red";
ctx.fillRect(20,20,150,100);

📍자바스크립트로 요소 추가하기
createElement() : 요소를 만드는 메서드
appendChild() : 선택한 요소 안에 자식 요소를 추가
기본적으로 appendChild를 통해 요소를 삽입하면 맨 뒤에 위치하게 된다.