잠못드는 개발자의밤 디스코드

html canvas

html canvas

PROGRAMMING
Flutter
HTML Crash Course
css
Dart 단기속성
JavaScript Crash Course
html canvas

html canvas 란?

html은 웹페이지를 만드는 하나의 문서이며, canvas는 html에서 그래픽을 위해 사용한다.

canvas는 html에서 <canvas> 태그로 사용되며 기본적인 점, 선, 면, 원부터 시작하여 애니메이션, 게임그래픽, 데이터시작화 및 비디오 처리까지 다양하게 사용된다.

canvas를 이용하기 위해서는 html도 익혀야 하지만 자바스크립트(javascript)와 함께 canvas api를 익혀야 한다.

canvas api는 2D 그래픽을 기준으로 한다.

만약 canvas를 이용하여 3D 그래픽을 구현하고자 한다면 WebGL 또는 three.js 같은 별도의 라이브러리를 참고하여 구현할 수 있다.

예제 보기 canvas Example

canvas로 할 수 있는 것은 많은데 가장 많은 예제가 간단한 게임들과 그림판이다.

이 예제들은 github 또는 유튜브 등 많은 곳에서 예제소스들이 공유되고 있다.

조금만 검색해 봐도 나오며 문서를 보면서 차분히 학습하려면 mozilla canvas 예제 또는 w3school 을 먼저 참고하는 것이 학습의 속도가 빠르다.

응용예제들은 이미 많기 때문에 유튜브의 내용을 참고해도 많은 도움이 된다.

튜토리얼 따라하기 보기 canvas tutorial

튜토리얼은 순서대로 따라하기 보다는 다른 사람이 만들어 놓은 작은 프로젝트들을 따라하면서 익힐 수 있는 자료들이다.

처음부터 알 수는 없지만 따라하고 실행화면을 보면 여러가지를 알 수 있다.

당연히 처음부터 모든 것을 알 수 없다.

코드를 따라해 보고 실행화면을 확인하고 코드의 의미를 찾아 그 의미를 파악하면 canvas에 대한 이해가 빨라질 것이다.

튜토리얼 같은 따라하기 예제들은 유튜브 등에 이미 많이 있고, github을 통해 전체코드가 공유되고 있다.

참고

[보기] 학습한 결과 내용

[보기] w3schools canvas

[보기] mozilla canvas