W3School - HTML Canvas

 

<canvas> 요소는 HTML 페이지의 비트맵 영역을 정의하고, Canvas API를 사용하면 JavaScript가 캔버스에 그래픽을 그릴 수 있고, Canvas API는 색상, 회전, 투명도 및 기타 픽셀 조작을 사용하여 모양, 선, 곡선, 상자, 텍스트 및 이미지를 그릴 수 있다고 합니다.

 

캔버스 직접 그려보기

 

 

 

HTML DOM 메소드 getElementById()를 사용하여 <canvas> 요소에 접근할 수 있습니다. id가 myCanvas인 요소를 가져옴
캔버스에 무언가를 그리려면 2D 컨텍스트 객체를 생성해야 합니다.

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

 

Note

HTML <canvas> 요소 자체에는 그리기 기능이 없습니다.
캔버스에 무언가를 그리려면 JavaScript를 사용해야 합니다.
getContext() 메소드는 그리기를 위한 도구(메서드)가 포함된 객체를 반환합니다.

 

 

2D 컨텍스트를 생성한 후 캔버스에 그림을 그릴 수 있습니다.
fillRect() 메서드는 (30,40)위치에 왼쪽 상단 모서리가 있는 검은색 직사각형을 그립니다. 직사각형의 너비는 200픽셀이고 높이는 300픽셀입니다.

 

 

 

ctx.fillStyle = "색깔" 로 직사각형 안 색변경 가능 (기본은 검정색)

 

 

document.createElement() 메서드를 사용해도 새 <canvas> 요소를 만들고 기존 HTML 페이지에 요소 추가가 가능하다.

 

 

 

JavaScript 코드 분석

const c = document.getElementById("myCanvas");

id가 myCanvas인 요소를 가져와서 변수c를 선언

const ctx = c.getContext("2d");

변수c의 canvas 요소에 대해 2D 드로잉 컨텍스트를 가져옴

ctx.beginPath();

새로운 경로(Path)를 시작함

ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.lineTo(70, 200);
ctx.lineTo(130, 200);
ctx.lineTo(130, 120);
ctx.lineTo(150, 180);
ctx.lineTo(200, 200);

그리기 시작 위치를 (20,20)으로 설정하고 [ ctx.moveTo(x, y); ]

좌표를 설정해서 그림 그리기를 시작함 [ ctx.lineTo(x, y); ]

ctx.strokeStyle = "blue";
ctx.stroke();

선의 색을 설정 [ ctx.strokeStyle = "색상"; ]

위에서 입력한 모든 직선들을 따라 설정한 색상의 선이 그려짐 [ ctx.stroke(); ]