5 사양은 많은 새로운 기능을 소개합니다. 가장 흥미로운 기능 중 하나는 canvas 요소입니다. HTML5 canvas JavaScript를 통해 그래프를 그리는 방법을 제공하며 사용하기 쉽지만 강력합니다. 각 canvas 요소에는 컨텍스트 (컨텍스트) (도면 보드의 페이지로 생각)가 있습니다. 브라우저는 여러 캔버스 컨텍스트를 지원하고 다른 캔버스 컨텍스트를 통해 그래픽 도면 기능을 제공합니다. 그래픽 드로잉 기능을 제공합니다. 5 사양은 많은 새로운 기능을 소개합니다. 가장 흥미로운 기능 중 하나는 요소입니다. HTML5는 JavaScript를 통해 그래픽을 그리는 방법을 제공하며 사용하기 쉽지만 강력합니다. 각 요소에는 컨텍스트 (컨텍스트) (도면 보드의 페이지로 생각)가 있습니다. 브라우저는 여러 캔버스 컨텍스트를 지원하고 다른 캔버스 컨텍스트를 통해 그래픽 도면 기능을 제공합니다.
대부분의 브라우저는 오페라, Firefox, Konqueror 및 Safari를 포함한 2D 캔버스 컨텍스트를 지원합니다. 또한 일부 버전의 오페라는 3D 캔버스를 지원하며 Firefox는 플러그인을 통해 3D 캔버스를 지원할 수도 있습니다.
문맥 기사
이 기사는 2D 캔버스를 소개합니다
기본 및 기본 캔버스 기능을 사용하는 방법 라인, 모양, 이미지 및 텍스트와 같은 기본 캔버스 기능. 이 기사를 이해하려면 JavaScript의 기본 사항을 더 잘 이해하는 것이 좋습니다.
이 기사의 예제 코드를 배치로 다운로드하려면 여기를 클릭하십시오.
캔버스를 만드는 방법은 매우 간단합니다. <canvas> 요소를 HTML 페이지에 추가하면됩니다.
<canvas id=mycanvas width=300 height=150>fallback content, in case the browser does not support canvas.</canvas>JavaScript에서 요소를 참조 할 수 있으려면 요소의 ID를 설정하는 것이 가장 좋습니다. 또한 캔버스의 높이와 너비를 설정해야합니다.
캔버스가 만들어지면 브러시를 준비합시다. 캔버스에 그래프를 그리려면 JavaScript를 사용해야합니다. 먼저 getelementbyid 기능을 통해 캔버스를 찾으십시오
요소, 그런 다음 컨텍스트를 초기화합니다. 컨텍스트 API를 사용하여 나중에 다양한 그래픽을 그릴 수 있습니다. 다음 스크립트는 캔버스에 사각형을 그립니다 (효과를 보려면 여기를 클릭하십시오).
// get a reference to the element.var elem = document.getelementbyid('mycanvas');// always check for properties 和methods, to make sure your code doesn't break // in other browsers.if (elem && elem.getcontext) { // get the 2d context. // remember: you can only initialize one context per element. var context = elem.getcontext('2d'); if (context) { // you are done! now you can draw your first rectangle. // you only need to provide the (x,y) coordinates, followed by the width and // height dimensions. context.fillrect(0, 0, 150, 100); }} 위의 코드를 문서의 head 부분 또는 외부 파일에 배치 할 수 있습니다.
캔버스를 만드는 방법을 소개 한 후 2D Canvas API를 살펴보고 이러한 기능으로 수행 할 수있는 작업을 살펴 보겠습니다.
위의 예는 사각형을 그리는 것이 얼마나 쉬운 지 보여줍니다.
FillStyle 및 Strokestyle 속성은 사각형 충전 및 선을 위해 쉽게 설정할 수 있습니다. 색상 가치 사용 방법 및 16 진수 번호, (), () 및 () (브라우저가 오페라와 같은 지원하는 경우
10 및 Firefox 3). () (Opera10 및 Firefox 3과 같은 브라우저가 지원하는 경우). () 및 () (Browser가 Opera10 및 Firefox 3과 같이 지원하는 경우). (), () 및 () (브라우저가 Opera10 및 Firefox 3과 같은 지원하는 경우). 16 진수 숫자, (), () 및 () (Opera10 및 Firefox 3과 같은 브라우저에서 지원되는 경우).
fillrect 사용하여 Fill-In Rectangle을 그릴 수 있습니다. strokerect 사용하여 경계와 충전물이없는 사각형을 그립니다. 캔버스를 지우려면 clearrect 사용할 수 있습니다. 위의 세 가지 방법의 매개 변수는 동일합니다 : x , y , 너비 , 높이 . 처음 두 매개 변수는 (x, y) 좌표를 설정하고 마지막 두 매개 변수는 사각형의 높이와 너비를 설정합니다.
linewidth 속성을 사용하여 선 두께를 변경할 수 있습니다. fillrect 사용되는지 보자.
strokerect clearrect 및 기타 예 :
context.fillstyle = '#00f'; // bluecontext.strokestyle = '#f00'; // redcontext.linewidth = 4;// draw some rectangles.context.fillrect (0, 0, 150, 50);context.strokerect(0, 60, 150, 50);context.clearrect (30, 25, 90, 60);context.strokerect(30, 25, 90, 60);이 예제 렌더링은 그림 1에 나와 있습니다.
그림 1 : FillRect, Strokerect 및
ClearRect 효과 다이어그램
임의의 모양은 캔버스 경로 (경로)를 통해 그릴 수 있습니다. 먼저 개요를 그린 다음 테두리를 그리고 채울 수 있습니다. 사용자 정의 모양을 만드는 것은 간단합니다. beginpath() 로 그리기 시작한 다음 직선, 곡선 및 기타 그래픽으로 그림을 그립니다. 그리기 후 fill 및 stroke 호출하여 채우기 또는 세트 경계를 추가하십시오. closepath() 호출하여 사용자 정의 그래픽 도면을 종료하십시오.
삼각형을 그리는 예는 다음과 같습니다.
// set the style properties.context.fillstyle = '#00f';context.strokestyle = '#f00';context.linewidth = 4;context.beginpath();// start from the top-left point.context.moveto(10, 10); // give the (x,y) coordinatescontext.lineto(100, 10);context.lineto(10, 100);context.lineto(10, 10);// done! now fill the shape, 和draw the stroke.// note: your shape will not be visible until you call any of the two methods.context.fill();context.stroke();context.closepath();렌더링은 그림 2에 나와 있습니다.
그림 2 : 삼각형
또 다른 책임있는 예는 직선, 곡선 및 아크를 사용합니다.
drawimage 방법을 사용하면 캔버스에 다른 이미지를 삽입 할 수 있습니다
( img 및 canvas 요소). 연산자에서는 캔버스에서 SVG 그래픽을 그릴 수 있습니다. 이 방법은 매우 복잡하며 3, 5 또는 9 개의 매개 변수를 가질 수 있습니다.
drawimage 사용하는 가장 기본적인 방법. 하나의 매개 변수는 이미지 위치를 지정하고 다른 두 매개 변수는 캔버스에서 이미지의 위치를 지정합니다.drawimage 사용 방법은 이미지 너비와 높이를 나타내는 두 매개 변수를 추가하십시오 (이미지 크기를 변경하려는 경우).drawimage 사용법 및 다른 4 개의 매개 변수는 소스 이미지에서 위치와 높이 너비를 설정합니다. 이 매개 변수를 사용하면 소스 이미지를 표시하기 전에 동적으로 자르고 있습니다.위의 사용 방법의 세 가지 예는 다음과 같습니다.
// three arguments: the element, destination (x,y) coordinates.context.drawimage( img_elem , dx , dy );// five arguments: the element, destination (x,y) coordinates, and destination // width and height (if you want to resize the source image).context.drawimage( img_elem , dx , dy , dw , dh );// nine arguments: the element, source (x,y) coordinates, source width and // height (for cropping), destination (x,y) coordinates, and destination width // and height (resize).context.drawimage( img_elem , sx , sy , sw , sh , dx , dy , dw , dh );효과는 그림 3에 나와 있습니다.
그림 3 : drawimage 렌더링.
2D 컨텍스트 API는 픽셀 레벨 작업을위한 세 가지 방법을 제공합니다 : createimagedata , getimagedata 및
putimagedata .
imagedata 객체는 이미지의 픽셀 값을 저장합니다. 각 객체에는 너비 , 높이 및 3 가지 속성이 있습니다
데이터 . 데이터 속성 유형은 CanvaspixelArray이며 width * height *4 픽셀 값을 저장하는 데 사용됩니다. 각 픽셀에는 RGB 값이 있고 투명도 알파 값이 있습니다 (값은 0 ~ ~입니다.
알파를 포함하여 255!). 픽셀의 순서는 왼쪽에서 오른쪽, 위에서 아래로, 행으로 저장됩니다.
원리를 더 잘 이해하려면 예를 살펴 보겠습니다 - 빨간 사각형 그리기
// create an imagedata object.var imgd = context.createimagedata(50,50);var pix = imgd.data;// loop over each pixel 和set a transparent red.for (var i = 0; n = pix.length, i < n; i += 4) { pix[i ] = 255; // red channel pix[i+3] = 127; // alpha channel}// draw the imagedata object at the given (x,y) coordinates.context.putimagedata(imgd, 0,0); 참고 : 모든 브라우저가 createimagedata 구현하는 것은 아닙니다. 지원되는 브라우저에서 imagedata 객체는 getimagedata 메소드를 통해 얻어야합니다. 샘플 코드를 참조하십시오.
많은 기능은 imagedata 를 통해 달성 될 수 있습니다. 예를 들어, 이미지 필터를 구현하거나 수학적 시각화를 구현할 수 있습니다 (예 : 프랙탈 및 기타 특수 효과). 다음 특수 효과는 간단한 색상 반전 필터를 구현합니다.
// get the canvaspixelarray from the given coordinates and dimensions.var imgd = context.getimagedata( x , y , width , height );var pix = imgd.data;// loop over each pixel and invert the color.for (var i = 0, n = pix.length; i < n; i += 4) { pix[i ] = 255 - pix[i ]; // red pix[i+1] = 255 - pix[i+1]; // green pix[i+2] = 255 - pix[i+2]; // blue // i+3 is alpha (the fourth element)}// draw the imagedata at the given (x,y) coordinates.context.putimagedata(imgd, x , y );그림 4는이 필터를 사용한 후 오페라를 보여줍니다
이미지 (그림 3은 원래 이미지입니다).
그림 4 : 컬러 역 필터
최근 WebKit 버전과 Firefox 3.1 Nightly 빌드는 텍스트 API를 지원하기 시작했지만 기사의 무결성을 보장하기 위해 텍스트 API를 여기에 소개하기로 결정했습니다.
context 객체에서 다음 텍스트 속성을 설정할 수 있습니다.
font : 텍스트 글꼴도 마찬가지입니다 font-family 속성 속성
textalign : 텍스트 수평 정렬. 바람직한 속성 값 : start , end , left , right , center . 기본값 :
start .
textbaseline : 텍스트의 수직 정렬. 바람직한 속성 값 : top , hanging , middle , alphabetic , ideographic , bottom . 기본값 : alphabetic .
텍스트를 그리는 두 가지 방법은 filltext 및 stroketext 입니다. 첫 번째는 FillStyle Fill이있는 텍스트를 그립니다. 후자는 스트로크 스타일 테두리 만있는 텍스트를 그립니다. 둘 다의 매개 변수는 동일합니다 : 그 릴 텍스트와 텍스트의 위치 (x, y) 좌표. 옵션 옵션도 있습니다 - 최대 너비. 필요한 경우 브라우저는 지정된 너비에 맞게 텍스트를 줄입니다.
텍스트 정렬 속성은 텍스트 및 설정에 영향을 미칩니다
(x, y) 좌표의 상대 위치.
다음은 캔버스에서 Hello World Text를 그리는 예입니다.
context.fillstyle = '#00f';context.font = 'italic 30px sans-serif';context.textbaseline = 'top';context.filltext ('hello world!', 0, 0);context.font = 'bold 30px sans-serif';context.stroketext('hello world!', 0, 50);그림 5는 렌더링입니다.
그림 5 : 텍스트 효과
현재 Konqueror와 Firefox 3.1 야간 빌드 지원 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);효과는 그림 6에 나와 있습니다.
그림 6 : 캔버스 그림자 효과 - 파란색 사각형, 빨간색 그림자
CSS 색상 외에도 fillstyle 및 strokestyle 특성은 canvasgradient 객체로 설정할 수 있습니다. -Canvasgradient canvasgradient 선과 채우기에 색상 구배를 사용할 수 있습니다.
canvasgradient 객체를 만들려면 createlineargradient 와 createradialgradient 두 가지 방법을 사용할 수 있습니다. 전자는 선형 색상 구배를 생성하고 후자는 원형 색상 구배를 만듭니다.
컬러 그라디언트 객체를 만든 후에는 객체의 addcolorstop 메소드를 사용하여 색상 중간 값을 추가 할 수 있습니다.
다음 코드는 색상 구배 사용 방법을 보여줍니다.
// you need to provide the source 和destination (x,y) coordinates // for the gradient (from where it starts 和where it ends).var gradient1 = context.createlineargradient( sx , sy , dx , dy );// now you can add colors in your gradient.// the first argument tells the position for the color in your gradient. the // accepted value range is from 0 (gradient start) to 1 (gradient end).// the second argument tells the color you want, using the css color format.gradient1.addcolorstop(0, '#f00'); // redgradient1.addcolorstop(0.5, '#ff0'); // yellowgradient1.addcolorstop(1, '#00f'); // blue// for the radial gradient you also need to provide source// 和destination circle radius.// the (x,y) coordinates define the circle center points (start 和// destination).var gradient2 = context.createradialgradient( sx , sy , sr , dx , dy , dr );// adding colors to a radial gradient is the same as adding colors to linear // gradients.또한 선형 색상 구배, 그림자 및 텍스트를 사용하여보다 복잡한 예제를 준비했습니다. 효과는 그림 7에 나와 있습니다.
그림 7 : 선형 색상 구배 사용의 예
캔버스로 무엇을 할 수 있는지 알고 싶다면 다음 프로젝트를 참조하십시오.
수필집
데모, 오픈 소스
비행
캔버스는 HTML5에서 가장 기대되는 기능 중 하나이며 대부분의 웹 브라우저에서 지원되었습니다. 캔버스는 게임을 만들고 그래픽 사용자 인터페이스를 향상시키는 데 도움이 될 수 있습니다. 2D 컨텍스트
API는 많은 그래픽 드로잉 기능을 제공합니다.이 기사를 통해 캔버스 사용에 대해 배웠으며 더 많은 것을 배우는 데 관심이 있습니다!