HTML5에서 특히 눈에 띄는 기능 중 하나는 웹 화면에 직접 그림을 그릴 수 있는 '캔버스(Canvas)'기능입니다. 캔버스 기능은 API를 이용하기 때문에 조금 복잡해 보일 수 있으나 자바스크립트만 왠 만큼 알고 있으면 선과 도형을 그릴 수 있고 이를 응용해 여러가지 모양을 만들 수 있습니다. 앞으로 HTML5 표준이 좀더 발전하면 3D 입체도형으로까지 발전할 수 있을 것입니다.
canvas태그는 HTML5에 처음 도입된 것으로 종이에 그림을 그리듯 화면 위에 도형이나 직선을 편리하게 그리기 위해
만들어진 것입니다.
canvas 태그는 자바스크립트로 이루어져 있기 때문에 경우에 따라서는 게임도 만들 수 있고,동영상도 만들 수 있습니다.
최근에 HTML5에 관심을 가지는 개발자들이 가장 눈여겨보는 항목도 canvas 태그입니다.
canvas 태그를 이용하면, 웹에서 별도의 플러그인 없이 주가 그래프를 구현할 수 있고, 게임을 만들 수 있으며,
플러그인이 필요했던 여러 가지 요소를 대신할 수 있기 때문입니다. 현재는 심지어 canvas 태그로 포토샵과 유사한
기능을 하는 요소까지 만들어져 있습니다.
canvas태그는 HTML5에 처음 도입된 것으로 종이에 그림을 그리듯 화면 위에 도형이나 직선을 편리하게 그리기 위해 만들어진 것입니다.
canvas태그로 만드는 것은 그 자체가 그래픽이 아니라 그래픽이 그려질 영역입니다. 우리가 그림을 그릴 때 캔버스 위에 그리듯 웹 페이지 위에 사각형이나 선을 그릴 때도 그림을 그릴 영역, 즉 웹 페이지상의 캔버스가 필요합니다. 그 캔버스 영역을 지정해 주는 것이 canvas 태그입니다.
<canvas id="rect1" width="300" height="200"></canvas>
설명
①canvas id 지정은, 한 페이지에 여러 개의 캔버스를 만들 수 있기 때문에,즉 canvas 태그를 여러 번
사용할 수 있기 때문에 서로 구별할 수 있도록 id 속성을 지정해 줍니다.
②캔버스 크기를 지정하는 width속성과 height속성을 지정해 줍니다. width와 height를 지정하지 않을 경우
기본으로 너비 300픽셀과 높이 150픽셀 크기의 캔버스가 만들어집니다.
③<canvas>태그는 반드시</canvas> 태그로 닫아줍니다.
캔버스에 너비와 높이가 지정되지만 캔버스 영역은 아무 스타일도 없기 때문에 실제로 웹 브라우저상에는 아무 표시도 되지 않습니다. 따라서 <canvas>태그만 사용해서는 안되고 앞으로 배울 자바스크립트와 함께 사용해야 합니다.
그래픽을 그릴 수 있는 영역, 즉 캔버스를 만들었으니 이제부터 그 위에 사각형을 그려 볼까요? 웹 페이지에 실제 도형을 그리는 작업은 자바스크립트를 이용합니다.
화면에 배경색이 채워진 사각형을 그리는 메서드는 fillRect.
아직은 모든 브라우저가 canvas태그를 지원하는 것은 아니기 때문에 그런 브라우저를 만나게 되면 브라우저 화면에는 아무것도 표시되지 않고 텅 비어 있게 됩니다. 사이트 방문자에게는 당황스러운 일이 되겠죠. 이를 고려해서 canvas태그를 지원하지 않는 브라우저까지 고려한 소스를 작성하는 것이 좋습니다.
앞에서 canvas태그와 자바스크립트를 이용해 사각형을 그리는 간단한 소스를 살펴보았습니다. 여기에서는 사각형 뿐만 아니라 삼각형이나 원 등 다른 도형들을 그리는 메서드에 대해 알아보겠습니다.
HTML5에서 유일하게 제공되는 도형은 사각형뿐입니다. 삼각형이나 원을 비롯한 그외 다른 도형들은 경로를 이용해서 직접 그 형태를 그려야 합니다.HTML5에서 사각형을 그릴 때 사용하는 주요 메서드는 다음과 같습니다.
경로를 이용해서 도형을 그릴 때 사용하는 메서드는 다음과 같습니다.
실제로 화면에 무엇인가를 그리지는 않지만 경로를 그릴 때 중요한 역할을 하는 메서드가 moveTo입니다. 메서드 이름에서 짐작할 수 있듯이 경로를 그릴 때 시작점을 옮기는 역할을 합니다.
lineTo는 직선을 그리는 메서드입니다.
원이나 호를 그릴 때는 arc 메서드를 사용합니다.
베지에 곡선은 수학뿐만 아니라 제조업 등 다양한 분야에서 사용되는 곡선으로, n의 조절점을 이용해서 n-1차의 부드러운 곡선을 그리는 방법입니다.HTML5에는 베지에 곡선을 그리는 두 개의 메서드가 있습니다.
앞에서 canvas태그와 자바스크립트를 이용해서 화면에 도형을 그리는 방법을 알아 보았습니다. 여기에서는 도형에 색을 채우거나 테두리를 그릴 때 색상이나 스타일, 투명도를 조절해서 좀더 보기 좋게 표시하는 방법을 알아보겠습니다.
도형에 색을 채우거나 테두리를 그릴 때 따로 색상을 지정하지 않으면 기본색인 검정색으로 채워지거나 테두리가 그려집니다.하지만 fillStyle 프로퍼티를 이용하면 도형에 채워넣을 색상을 지정할 수 있고, strokeStyle 프로퍼티를 이용하면 테두리 색상을 지정할 수 있습니다.
화면에 그린 도형들은 그 투명도를 조절할 수 있습니다. globalAlpha라는 프로퍼티를 사용하거나 fillStyle과 strokeStyle 값을 지정할 때 rgba()함수를 사용하여 투명도를 조절합니다.
포토샵 같은 그래픽 편집 프로그램에서 색을 채울 때 전체를 똑같은 색으로 채우는 방법과 그라디언트로 채우는 방법이 있습니다. 마찬가지로 HTML5에서도 도형에 색을 채울 때 그라디언트를 적용할 수 있고, 선형 그라디언트 중에서 선택 할 수 있습니다.
HTML5에서는 몇 가지 프로퍼티를 이용해 화면에 표시하는 선의 스타일을 조절할 수 있습니다.
createPattern 메서드를 이용하면 도형에 색뿐만 아니라 패턴을 채울 수도 있습니다.
캔버스에서는 다음의 네 가지 프로퍼티를 이용해서 도형이나 텍스트에 그림자 효과를 추가할 수 있습니다.
캔버스에 어떤 도형을 그리든 현재 그려져 있는 상태를 저장해 두었다가 다시 불러와 사용할 수 있으면 무척 편리할 것입니다. 웹 페이지를 저장하는 것이 아니라 캔버스를 저장하는 방법과 다시 불러오는 방법에 대해 알아보겠습니다.
캔버스 객체에는 save라는 메서드와 restore라는 메서드가 있어서 현재 상태를 저장하기도 하고 다시 가져오기도 합니다. 캔버스를 저장하면 캔버스에 적용된 여러 스타일이나 작업 내용들이 마치 사진을 찍어 놓은 것처럼 고스란히 저장됩니다.
지금까지는 canvas태그와 여러 메서드를 이용해서 휍 화면에 여러 가지 도형 그리는 방법에 대해서 알아보았습니다. 여기에 이미지들을 함께 사용한다면 더욱 재미있는 효과를 만들 수 있습니다.PNG나 JPG, GIF 같은 이미지를 가져와 함께 사용하는 방법을 알아보겠습니다.
캔버스에 이미지를 표시하는 것은 웹 페이지에 이미지를 삽입하는 것과는 다릅니다.따라서 단순히 URL이나 파일 경로를 지정해 이미지를 사용하는 게 아니라, 자바스크립의 이미지 객체를 만들어준 후 그 객체에 이미지를 그려넣는 순서를 따르게 됩니다. 이미지를 화면에 표시할 때는 drawImage 메서드를 사용합니다.
캔버스에 이미지를 표시할 때 원래 이미지 크기보다 크게, 혹은 작게 표시할 수 있습니다. 이때도 drawImage 메서드를 사용하는데 단순히 이미지를 그릴 때와는 매개변수가 달라집니다.
큰 이미지 중에서 일부만 사용하려고 할 때도 drawImage 메서드를 이용해서 해결할 수 있습니다. 단, 이 경우에는 매개변수가 많아지기 때문에 사용하는 매개변수에 대해서 먼저 이해하고 시작해야 합니다.
도형이나 이미지를 그리는 데서 벗어나 위치를 옮긴다거나 회전시키고 크기를 조절하는 간단한 편집을 해보겠습니다. 이런 방법들은 응용하기에 따라 다양한 효과를 만들수 있습니다.
가장 간단한 편집 형태는 위치를 옮기는 것입니다. 캔버스의 모든 좌표는 원점을 기준으로 정해지기 때문에 브라우저의 원점을 옮기면 캔버스와 관련된 모든 위치가 그에 맞춰서 바뀌게 됩니다. 원점의 위치를 옮기는 메서드는 translate입니다.
rotate 메서드를 이용하면 원점을 기준으로 캔버스를 회전시킬 수 있습니다.
같은 캔버스 안에서도 도형이나 이미지를 크게, 혹은 작게 표시할 수 있습니다.
2개 이상의 도형을 겹쳐 그리면 무조건 나중에 그린 도형이 이전 도형 위에 그려집니다. 여기에서는 도형의 쌓기 순서를 조절해서 여러 가지 효과를 만드는 방법에 대해 알아보겠습니다.
이 메서드를 사용하면 기존 도형 뒤쪽으로 도형을 그린다거나 특정 영역을 지울 수도 있습니다.
클리핑 경로란 경로를 그려놓고 경로 바깥쪽 부분은 불필요하므로 감춰버리도록 마스킹 처리하는 것을 말합니다.
캔버스에서도 텍스트를 지원하기 때문에 HTML5의 메서드와 속성을 사용해서 텍스트를 그릴 수 있습니다. 하지만 아직까지는 브라우저별로 조금씩 다르게 표현되는 부분들이 있기 때문에 HTML5 표준 규약이 정해질 때까지 지켜보아야 할 것입니다. 그럼 캔버스에서 텍스트를 그리는 방법에 대해 알아보겠습니다.
캔버스에서 텍스트를 그릴 때 일부 텍스트 스타일을 사용할 수 있습니다.
fillText()메서드 : font 속성과 textAlign 속성, 그리고 textBaseline 속성에서 지정한 여러 스타일 정보를 사용해 텍스트를 그립니다. fillStyle을 사용해 텍스트가 채워지고 strokeStyle은 무시됩니다.
