canvas 기초

Canvas API는 JavaScript 와 HTML 요소 를 통해 그래픽을 그리는 수단을 제공

애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리에 사용

 

Canvas API는 주로 2D 그래픽에 초점

 

Canvas 요소를 사용하는  WebGL API 는 2D 및 3D 그래픽을 그릴 수 있음

 

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

 

const canvas = document.getElementById("canvas"); //HTML <canvas>요소에 대한 참조
const ctx = canvas.getContext("2d"); //해당 요소의 컨텍스트, 드로잉이 렌더링될 대상을 가져옴

ctx.fillStyle = "green"; //사각형을 녹색으로 만듦
ctx.fillRect(10, 10, 150, 100); //왼쪽 위 모서리를 (10, 10)에 배치하고 너비 150단위, 높이 100단위의 크기를 제공

 

 

결과