HTML5 캔버스, 초보자를위한 튜토리얼

HTML5 사양은 많은 새로운 기능을 소개합니다. 가장 흥미로운 기능 중 하나는 캔버스 요소입니다. HTML 5 Canvas는 JavaScript를 통해 그래픽을 그리는 방법을 제공하며 사용하기 쉽지만 강력합니다. 각 캔버스 요소에는 컨텍스트 (컨텍스트) (드로잉 보드의 페이지로 생각)가 있습니다. 브라우저는 여러 캔버스 컨텍스트를 지원하고 다른 API를 통해 그래픽 도면 기능을 제공합니다. 대부분의 브라우저는 오페라, Firefox, Konqueror 및 Safari를 포함한 2D 캔버스 컨텍스트를 지원합니다. 또한 일부 버전의 오페라는 3D 캔버스를 지원하며 Firefox는 플러그인을 통해 3D 캔버스를 지원할 수도 있습니다.

이 기사는 2D 캔버스의 기본 사항과 선, 모양, 이미지 및 텍스트와 같은 기본 캔버스 기능을 사용하는 방법을 소개합니다. 이 기사를 이해하려면 JavaScript의 기본 사항을 더 잘 이해하는 것이 좋습니다.

이 기사의 예제 코드를 배치로 다운로드하려면 여기를 클릭하십시오.

캔버스 기본 사항 :

캔버스를 만드는 방법은 간단합니다. <canvas> 요소를 HTML 페이지에 추가하면됩니다.

<canvas id = mycanvas 너비 = 300 높이 = 150>

브라우저가 캔버스를 지원하지 않는 경우 폴백 컨텐츠.

</캔버스>

JavaScript에서 요소를 참조하기 위해 요소 ID를 설정하는 것이 가장 좋습니다. 또한 캔버스의 높이와 너비를 설정해야합니다.

캔버스가 만들어지면 브러시를 준비합시다. 캔버스에 그래프를 그리려면 JavaScript를 사용해야합니다. 먼저 GetElementByID 함수를 통해 Canvas 요소를 찾은 다음 컨텍스트를 초기화하십시오. 그런 다음 컨텍스트 API를 사용하여 다양한 그래픽을 그릴 수 있습니다. 다음 스크립트는 캔버스에 사각형을 그립니다 (효과를 보려면 여기를 클릭하십시오).

// 요소에 대한 참조를 얻습니다.

var elem = document.getElementById ( 'mycanvas');

// 코드가 깨지지 않도록 항상 속성과 메소드를 확인하십시오.

// 다른 브라우저에서.

if (elem && elem.getContext) {

// 2D 컨텍스트를 얻습니다.

// 기억 : 요소 당 하나의 컨텍스트 만 초기화 할 수 있습니다.

var context = elem.getContext ( '2d');

if (컨텍스트) {

// 끝났습니다! 이제 첫 사각형을 그릴 수 있습니다.

// (x, y) 좌표 만 제공하면 너비와

// 높이 치수.

context.fillRect (0, 0, 150, 100);

}

}

위의 코드를 문서의 헤드 부분 또는 외부 파일에 배치 할 수 있습니다.

2D 컨텍스트 API :

캔버스를 만드는 방법을 소개 한 후 2D Canvas API를 살펴보고 이러한 기능으로 수행 할 수있는 작업을 확인해 봅시다.

기본 라인 :

위의 예는 사각형을 그리는 것이 얼마나 쉬운 지 보여줍니다.

FillStyle 및 Strokestyle 속성은 사각형 충전 및 선을 위해 쉽게 설정할 수 있습니다. 색상 값은 CSS와 동일하게 사용됩니다 : 16 진수, rgb (), rgba () 및 hsla. FillRect를 사용하여 FillRect로 사각형을 그리는 데 사용할 수 있습니다. Strokerect를 사용하여 경계와 충전물이없는 사각형을 그립니다. 캔버스를 지우려면 ClearRect를 사용할 수 있습니다. 위의 세 가지 방법의 매개 변수는 동일합니다 : x, y, 너비, 높이. 처음 두 매개 변수는 (x, y) 좌표를 설정하고 마지막 두 매개 변수는 사각형의 높이와 너비를 설정합니다. linewidth 속성을 사용하여 선 두께를 변경할 수 있습니다. FillRect, Strokerect ClearRect 및 기타를 사용한 예제를 살펴 보겠습니다.

Context.fillStyle = '#00f'; // 파란색

context.strokestyle = '#f00'; // 빨간색

context.linewidth = 4;

// 일부 직사각형을 그립니다.

context.fillRect (0, 0, 150, 50);

Context.Strokerect (0, 60, 150, 50);

Context.ClearRect (30, 25, 90, 60);

Context.Strokerect (30, 25, 90, 60);

이 예제 렌더링은 다음 그림에 표시됩니다.

길:

임의의 모양은 캔버스 경로 (경로)를 통해 그릴 수 있습니다. 먼저 개요를 그린 다음 테두리를 그리고 채울 수 있습니다. 사용자 정의 모양을 만드는 것은 간단합니다. 시작 경로 ()로 그리기 시작한 다음 직선, 곡선 및 기타 그래픽으로 그림을 그립니다. 그리기 후 채우기 및 스트로크를 호출하여 채우기 또는 세트 경계를 추가하십시오. ClosePath ()를 호출하여 사용자 정의 그래픽 도면을 종료하십시오. 삼각형을 그리는 예는 다음과 같습니다.

// 스타일 속성을 설정합니다.

Context.fillStyle = '#00f';

context.strokestyle = '#f00';

context.linewidth = 4;

context.beginpath ();

// 왼쪽 상단에서 시작합니다.

컨텍스트 .Moveto (10, 10); // (x, y) 좌표를 제공합니다

Context.lineto (100, 10);

Context.lineto (10, 100);

Context.lineto (10, 10);

// 완료! 이제 모양을 채우고 스트로크를 그립니다.

// 참고 : 두 가지 메소드 중 하나를 호출 할 때까지 모양이 보이지 않습니다.

context.fill ();

Context.Stroke ();

context.closepath ();

렌더링은 다음 그림에 표시됩니다.

또 다른 복잡한 예제는 직선, 곡선 및 아크를 사용합니다.

이미지 삽입 :

DrawImage 방법을 사용하면 다른 이미지 (IMG 및 Canvas 요소)를 캔버스에 삽입 할 수 있습니다. 오페라에서는 캔버스에서 SVG 그래픽을 그릴 수 있습니다. 이 방법은 더 복잡하고 3, 5 또는 9 개의 매개 변수를 가질 수 있습니다.

3 매개 변수 : DrawImage를 사용하는 가장 기본적인 방법. 하나의 매개 변수는 이미지 위치를 지정하고 다른 두 매개 변수는 캔버스에서 이미지의 위치를 ​​지정합니다.

5 매개 변수 : 위에서 언급 한 3 가지 매개 변수를 포함하여 중간 드로워 이식 사용 방법은 이미지 너비와 높이를 나타내는 두 매개 변수를 추가하십시오 (이미지 크기를 변경하려는 경우).

9 매개 변수 : 가장 복잡한 드로잉은 위 5 개의 매개 변수를 포함한 혼합 사용 방법이며, 다른 4 개의 매개 변수는 소스 이미지에서 위치와 높이 너비를 설정합니다. 이 매개 변수를 사용하면 소스 이미지를 표시하기 전에 동적으로 자르고 있습니다.

위의 사용 방법의 세 가지 예는 다음과 같습니다.

// 세 가지 인수 : 요소, 대상 (x, y) 좌표.

context.DrawImage (img_elem, dx, dy);

// 5 인수 : 요소, 대상 (X, Y) 좌표 및 대상

// 너비와 높이 (소스 이미지 크기를 조정하려는 경우).

Context.DrawImage (img_elem, dx, dy, dw, dh);

// 9 개의 인수 : 요소, 소스 (x, y) 좌표, 소스 너비 및

// 높이 (자르기), 대상 (X, Y) 좌표 및 대상 너비

// 높이 (크기 조정).

Context.DrawImage (IMG_ELEM, SX, SY, SW, SH, DX, DY, DW, DH);

효과는 아래 그림에 나와 있습니다.

픽셀 레벨 작동 :

2D 컨텍스트 API는 픽셀 레벨 작업을위한 세 가지 방법 인 CreateImagedata, getImagedata 및 putImagedata를 제공합니다. Imagedata 객체는 이미지의 픽셀 값을 저장합니다. 각 객체에는 너비, 높이 및 데이터의 세 가지 속성이 있습니다. 데이터 속성 유형은 CanvaspixelArray이며 너비*높이*4 픽셀 값을 저장하는 데 사용됩니다. 각 픽셀은 RGB 값과 투명도 알파 값을 갖습니다 (값은 알파를 포함하여 0 ~ 255입니다!). 픽셀의 순서는 왼쪽에서 오른쪽, 위에서 아래로, 행으로 저장됩니다. 그 원리를 더 잘 이해하려면 예를 살펴 보겠습니다. 빨간 사각형을 그립니다.

// Imagedata 객체를 만듭니다.

var imgd = context.createimagedata (50,50);

var pix = imgd.data;

// 각 픽셀 위에 루프를하고 투명한 빨간색을 설정합니다.

for (var i = 0; n = pix.length, i <n; i += 4) {

pix [i] = 255; // 빨간색 채널

pix [i+3] = 127; // 알파 채널

}

// 주어진 (x, y) 좌표에서 iMagedata 객체를 그립니다.

context.putImagedata (imgd, 0,0);

참고 : 모든 브라우저가 CreateImagedata를 구현하는 것은 아닙니다. 지원되는 브라우저에서 Imagedata 객체는 getImageata 메소드를 통해 얻어야합니다. 샘플 코드를 참조하십시오.

Imageata는 많은 기능을 완료하는 데 사용될 수 있습니다. 예를 들어, 이미지 필터를 구현하거나 수학적 시각화를 구현할 수 있습니다 (예 : 프랙탈 및 기타 특수 효과). 다음 특수 효과는 간단한 색상 반전 필터를 구현합니다.

// 주어진 좌표 및 치수에서 CanvaspixelArray를 가져옵니다.

var imgd = context.getImageData (x, y, 너비, 높이);

var pix = imgd.data;

// 각 픽셀 위로 반복하고 색상을 반전시킵니다.

for (var i = 0, n = pix.length; i <n; i += 4) {

pix [i] = 255 -pix [i]; // 빨간색

pix [i+1] = 255 -pix [i+1]; // 녹색

pix [i+2] = 255 -pix [i+2]; // 파란색

// i+3은 알파 (네 번째 요소)

}

// 주어진 (x, y) 좌표에서 이미지 데이터를 그립니다.

context.putImagedata (imgd, x, y);

다음 그림은이 필터를 사용한 후 효과를 보여줍니다.

단어:

최근 WebKit 버전과 Firefox 3.1 Nightly 빌드가 텍스트 API를 지원하기 시작했지만 기사의 무결성을 보장하기 위해 텍스트 API를 여기에 소개하기로 결정했습니다.

컨텍스트 객체에서 다음 텍스트 속성을 설정할 수 있습니다.

글꼴 : CSSFONT-FAMILY 속성과 동일한 텍스트 글꼴입니다

Textalign : 텍스트 수평 정렬. 바람직한 속성 값 : 시작, 끝, 왼쪽, 오른쪽, 중앙. 기본값 : 시작하십시오.

TextBaseline : 텍스트의 수직 정렬. 바람직한 속성 값 : 상단, 교수형, 중간, 알파벳, 아이디어, 하단. 기본값 : 알파벳

텍스트를 그리는 두 가지 방법은 FillText 및 Stroketext입니다. 첫 번째는 FillStyle Fill으로 텍스트를 그립니다. 후자는 Strokestyle 테두리만으로 텍스트를 그립니다. 둘 다의 매개 변수는 동일합니다 : 그 릴 텍스트와 텍스트의 위치 (x, y) 좌표. 옵션 옵션도 있습니다 - 최대 너비. 필요한 경우 브라우저는 지정된 너비에 맞게 텍스트를 줄입니다. 텍스트 정렬 속성은 텍스트의 상대적 위치에 세트 (x, y) 좌표에 영향을 미칩니다.

다음은 캔버스에서 Hello World Text를 그리는 예입니다.

Context.fillStyle = '#00f';

context.font = '이탈리아 30px sans-serif';

context.textBaseline = 'top';

context.fillText ( 'Hello World!', 0, 0);

context.font = 'bold 30px sans-serif';

context.stroketext ( 'Hello World!', 0, 50);

다음 그림은 렌더링입니다.

그림자:

현재 Konqueror와 Firefox 3.1 Nightly 빌드 만 Shadows API를 지원합니다. API의 특성은 다음과 같습니다.

ShadowColor : 그림자 색상. 그 값은 CSS 색상 값과 일치합니다.

Shadowblur : 그림자 흐림 정도를 설정합니다. 이 값이 클수록 그림자가 더 흐릿합니다. 그 효과는 Photoshop의 가우스 퍼지 필터와 동일합니다.

ShadowOffsetX 및 ShadowOffsety : 픽셀로 그림자의 X 및 Y 오프셋.

다음은 Canvas Shadow의 예입니다.

context.shadowoffsetx = 5;

context.shadowoffsety = 5;

Context.shadowBlur = 4;

context.shadowColor = 'rgba (255, 0, 0, 0.5)';

Context.fillStyle = '#00f';

context.fillRect (20, 20, 150, 100);

효과는 아래 그림에 나와 있습니다.

컬러 그라디언트 :

CSS 색상 외에도 FillStyle 및 Strokestyle 속성은 Canvasgradient 객체로 설정할 수 있습니다. -컬러 그라디언트는 선에 사용될 수 있으며 캔버스 그라디언트를 통해 채우십시오. Canvasgradient 객체를 만들려면 Createlineargradient와 Createradialgradient의 두 가지 방법을 사용할 수 있습니다. 전자는 선형 색상 구배를 생성하고 후자는 원형 색상 구배를 만듭니다. 컬러 그라디언트 객체를 만든 후에는 객체의 AddColorStop 메소드를 사용하여 색상 중간 값을 추가 할 수 있습니다. 다음 코드는 색상 구배 사용 방법을 보여줍니다.

// 소스 및 대상 (X, Y) 좌표를 제공해야합니다.

// 그라디언트의 경우 (시작 위치 및 종료 위치).

var gradient1 = context.createlineargradient (sx, sy, dx, dy);

// 이제 그라디언트에 색상을 추가 할 수 있습니다.

// 첫 번째 인수는 그라디언트에서 색상의 위치를 ​​알려줍니다. 그만큼

// 허용 값 범위는 0 (그라디언트 시작)에서 1 (그라디언트 끝)입니다.

// 두 번째 인수는 CSS 색상 형식을 사용하여 원하는 색상을 알려줍니다.

gradient1.addcolorstop (0, '#f00'); // 빨간색

gradient1.addcolorstop (0.5, '#ff0'); // 노란색

gradient1.addcolorstop (1, '#00f'); // 파란색

// 방사형 그라디언트의 경우 소스도 제공해야합니다.

// 대상 원 반경.

// (x, y) 좌표는 원 센터 포인트를 정의합니다 (시작 및

// 목적지).

var gradient2 = context.createRadialgradient (sx, sy, sr, dx, dy, dr);

// 방사형 그라디언트에 색상을 추가하는 것은 색상을 선형에 추가하는 것과 동일합니다.

// 그라디언트.

또한 선형 색상 구배, 그림자 및 텍스트를 사용하여보다 복잡한 예제를 준비했습니다.

효과는 아래 그림에 나와 있습니다.

캔버스 데모 :

캔버스로 무엇을 할 수 있는지 알고 싶다면 다음 프로젝트를 참조하십시오.

오페라 위젯 :

시마 Quarium

아티스트의 스케치북

스피아프

온라인 엔지니어링 및 데모 :

뉴턴 다항식

캔버스 케이프 - 3D 워커

Paint.Web- 페인팅 데모, 오픈 소스

스타 필드 비행

대화식 얼룩

일부:

캔버스는 HTML 5에서 가장 기대되는 기능 중 하나이며 현재 대부분의 웹 브라우저에서 지원됩니다. 캔버스는 게임을 만들고 그래픽 사용자 인터페이스를 향상시키는 데 도움이 될 수 있습니다. 2D 컨텍스트

API는 많은 그래픽 드로잉 기능을 제공합니다.이 기사를 통해 캔버스 사용에 대해 배웠으며 더 많은 학습에 관심이 있습니다!