<canvas> 태그

HTML에서 캔버스 태그는 이미지, 드로잉, 애니메이션과 같은 그래픽을 위한 컨테이너이다. 웹 페이지에서 그래픽을 만들고 표시하는 데 사용되며 자바스크립트를 사용하여 조작할 수 있다.

캔버스의 크기는 캔버스 요소에 직접 너비와 높이 속성을 설정하거나 CSS 스타일을 사용하여 정의할 수 있다.

<canvas id="myCanvas" width="500" height="500"></canvas>

캔버스에 그림을 그리려면 JavaScript를 사용해야 한다. 캔버스 요소는 캔버스에 도형, 선, 이미지 및 텍스트를 그릴 수 있는 JavaScript API를 제공한다.

다음은 자바스크립트를 사용하여 단순한 직사각형을 만드는 방법의 예이다:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);

이 예에서 JavaScript 코드는 캔버스 요소에 대한 참조를 가져오고 2D 렌더링 컨텍스트를 가져온 다음 캔버스에 채워진 직사각형을 그린다.

캔버스는 웹 개발에 널리 사용되며, 광범위한 대화형 시각화, 게임, 차트 및 기타 유형의 그래픽을 만드는 데 사용될 수 있다.