canvas태그2 [Canvas API]캔버스(Canvas)를 이용한 도형 그리기 이제 어떻게 캔버스에 그릴 수 있는지에 대해 알아보자. 캔버스 위에 물체를 그릴 때에는 path를 사용하는 것이 필수적이므로 이것이 어떻게 사용되는 지 볼 것이다. 📒 캔버스(Canvas)를 이용한 도형 그리기 📍 그리드 드로잉을 시작하기 앞서, 캔버스 그리드 혹은 좌표공간(coordinate space)에 대하여 이야기 해보겠다. 이전 페이제에서 이야기했던 HTML 골격(skeleton)은 가로 세로 각 150 픽셀의 캔버스 요소를 가지고 있다. 기본적으로 그리드의 1단위는 캔버스의 1픽셀과 같다. 이 그리드의 원점은 좌측상단의 (0, 0)이다. 모든 요소들은 이 원점을 기준으로 위치된다. 그렇기 때문에 왼쪽에서 x 픽셀, y 픽셀 떨어진 것이라 볼 수 있고, 이 사각형의 좌표는 (x, y)가 된다. .. 2023. 10. 10. Canvas API Canvas HTML의 태그와 JavaScript를 사용하면 다양한 그래픽 요소를 만들 수 있다. 단순한 도형을 그리는 것은 물론, 데이터 시각화, 애니메이션, 웹 게임 등을 사용하기에 따라 무궁무진한 콘텐츠를 만들어 낼 수 있다. 이제 기본적인 캔버스 사용법부터 알아보자면, 일단 캔버스 태그를 작성하는 것으로 시작된다. 캔버스는 canvas 엘리먼트를 DOM으로 조작하는 방식으로 작성된다. 따라서 엘리먼트를 선택할 때 사용할 id를 작성해주는 것이 좋다. 캔버스를 지원하지 않는 브라우저에서는 캔버스 대신 태그 사이 내용이 표시된다. 이제 자바스크립트를 사용해서 엘리먼트를 선택해주자! const canvas = document.querySelector("#canvas"); 우선 너비와 높이를 설정해주어야.. 2023. 10. 10. 이전 1 다음 728x90