-
Canvas(1)_Canvas에 대하여Canvas 2022. 10. 12. 17:59
해당 게시글은 2022.03.10에 깃허브로 작성되었습니다.
1. canvas란?
Canvas API는 Javascript와 HTML <canvas> 엘리먼트를 통해 그래픽을 그리기 위한 수단을 제공한다.
codepen이나 awwwards 사이트를 보던 중 canvas가 사용된 경우를 본 적이 있을 것이다.
그렇듯 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용되는 것이 canvas다.
주로 2D 그래픽에 중점을 두고 있으며, WebGL API 또한 <canvas> 엘리먼트를 사용한다.
간단한 예제를 보며 기본 작동 원리를 배워보자.
2. 기본 원리
(1)
<canvas>요소<canvas> 요소는 width와 height의 두 속성을 지닌다. width와 height 속성을 지정하지 않으면 canvas의 처음 너비는 300px이고 높이는 150px이다.
CSS로 <canvas>의 크기를 임의로 정할 수 있지만 렌더링하는동안 이미지는 레이아웃의 크기에 맞게 조정된다. 그러므로 초기 canvas의 비율을 고려하지 않고 CSS로 크기를 지정하면 왜곡되어 나타날 수 있기에 <canvas> 속성에서 width와 height 속성을 명시하는 편이 좋다.
(2) 대체 콘텐츠
<canvas>요소는 canvas를 지원하지 않는 오래된 브라우저(인터넷 익스플로러9 이하의 버전이나 텍스트기반 브라우저)들을 위한 대체 콘텐츠를 정의하기 쉬운데
그저 <canvas> 안에 대체 콘텐츠를 기입하면 된다.
<!-- TEXT --> <canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 +0.15 </canvas> <!-- IMAGE --> <canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150" alt=""/> </canvas>위와 같이 대체적으로 텍스트 또는 이미지를 삽입하는 방식을 사용한다.
(3) 렌더링 컨텍스트
<canvas> 요소는 고정된 크기의 드로잉 영역을 생성하며, 그 영역은 '보여질 콘텐츠를 생성하고 다루게 될' 하나 이상의 렌더링 컨텍스트(rendering contexts)를 노출시킨다.
<canvas id="canvas" width="150" height="150"></canvas>canvas는 처음에 비어있으며, 무엇인가를 표시하기 위해서는 스크립트가 렌더링 컨텍스트에 접근하여 그리도록 해야 한다.
<canvas>는 getContext() 메서드를 호출해서 렌더링 컨텍스트와 그리기 함수들을 사용할 수 있다.
getContext() 메서드는 렌더링 컨텍스트 타입을 지정하는 하나의 파라미터를 가진다. (2D | 3D)
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d");(4) 지원여부 검사
스크립트를 통해 getContext() 메서드의 존재 여부를 확인함으로써 프로그래밍 방식으로 지원하는지를 확인할 수 있는데 아래와 같이 작성하면 된다.
var canvas = document.getElementById('canvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // canvas 내용 코드 기입 } else { // canvas가 지원되지 않는다는 텍스트 기입 }(5) 템플릿
그럼 이제 html과 연결하여 canvas의 가장 최소한의 템플릿을 작성해보자.
<style type="text/css"> canvas {border: 1px solid black;} </style> <body onload="draw();"> <canvas id="tutorial" width="150" height="150"></canvas> <script type="application/javascript" src="./js/script.js"></script> </body>function draw(){ var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); } }위와 같이 html 내에서 draw 메서드를 호출하기 위해 <body onload="draw();">를 작성했다.
앞서 언급했듯 canvas는 그려지도록 해줄 함수가 필요하므로 canvas를 사용하고 싶은 영역의 태그에서 메서드를 호출해주면 그려지게 된다.
이와 비슷하게 페이지 로딩이 완료될 때 실행시켜주는 함수로는 window.setTimeout() | window.setInterval() 등이 있다.
이렇게 간단하게 canvas의 기본 원리에 대해 배워봤다.
다음 시간에는 직접 도형을 그려보며 그려지는 원리에 대해 배워보자.
'Canvas' 카테고리의 다른 글
Canvas(6)_변형 (0) 2022.10.13 Canvas(5)_이미지 사용하기 (1) 2022.10.13 Canvas(4)_텍스트 그리기 (0) 2022.10.13 Canvas(3)_스타일과 색 적용 (0) 2022.10.13 Canvas(2)_도형 그리기 (0) 2022.10.13