HTML5 Canvas 기반: 문자열, 경로, 배경 및 Pictures_html5 튜토리얼 기술에 대한 자세한 설명

Canvas를 생성하는 방법은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

태그를 사용할 수 없는 경우 다음과 같이 대체 텍스트 추가에서 확인할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

귀하의 브라우저는 그렇지 않습니다 캔버스 요소를 지원합니다.

현재 다양한 브라우저의 새 버전이 점차 HTML5를 지원하기 시작했으므로 사용하기 전에 꼭 확인하세요. 귀하의 브라우저가 Chrome, Firefox 또는 IE9 이상의 브라우저의 새 버전인지 확인하세요.

태그 자체에는 그림을 그리는 기능이 없습니다. JavaScript에서 이미지를 그릴 수 있는 영역만 제공하므로 그림 작업은 JavaScript로 완료해야 합니다. 그리기 전 필요한 준비 작업은 다음과 같습니다.

코드 복사

코드는 다음과 같습니다

var canvas = document.getElementById(“canvas”);
var context2D = canvas.getContext(“2d”);

먼저 캔버스 개체를 가져와야 합니다. 그런 다음 getContext() 메서드를 사용하여 캔버스에서 2차원 그리기 개체를 가져옵니다. getContext() 메소드의 매개변수 "2d"는 2차원을 의미한다(향후 3차원으로 확장할 예정이라고 하는데, 현재 사용 가능한 매개변수는 "2d" 뿐이다).

얻은 Context 객체는 HTML5에 내장된 객체로, 다양한 그래픽 그리기 및 조정 방법을 포함하고 있으며 이를 JavaScript로 조작하면 Canvas 캔버스에 필요한 그래픽을 그릴 수 있습니다.

문자열

캔버스에 문자열을 그리려면 Context 개체의 fillText() 메서드를 사용하세요. fillText() 메소드의 프로토타입은 다음과 같습니다.

void fillText(text, left,top, [maxWidth]);

네 가지 매개변수의 의미는 그려지는 문자열, 캔버스에 그릴 때 캔버스 왼쪽 위 모서리의 가로좌표와 세로좌표, 그려지는 문자열의 최대 길이입니다. 최대 길이 maxWidth는 선택적 매개변수입니다.

또한 Context 개체의 글꼴 속성을 변경하여 문자열의 글꼴과 크기를 조정할 수 있습니다. 기본값은 "10px sans-serif"입니다.

다음 예에서는 "Hello Canvas!" 문자열을 캔버스에 표시합니다(문자열의 왼쪽 상단이 캔버스 중앙에 있음)

코드 복사

코드는 다음과 같습니다.

브라우저가 캔버스 요소를 지원하지 않습니다!

경로

HTML5 Canvas의 기본 그래픽은 경로를 기반으로 합니다. 일반적으로 Context 개체의 moveTo(), lineTo(), ect(), arc() 및 기타 메서드를 사용하여 먼저 캔버스에 있는 그래픽의 경로 지점을 추적한 다음 fill() 또는 스트로크() 메서드를 사용합니다. 그래픽을 채우거나 경로 점에 따라 그리는 데 사용됩니다.

일반적으로 경로 그리기를 시작하기 전에 Context 개체의 BeginPath() 메서드를 호출해야 합니다. 이 메서드의 기능은 이전 경로를 지우고 Context에 새 경로 그리기를 시작하도록 알리는 것입니다. ) 메서드가 호출되면 이전 경로가 모두 그려집니다. 경로는 그리기 효과에 영향을 미치며 반복 작업으로 인해 웹 페이지 성능에도 영향을 미칩니다. 또한 Context 객체의 closePath() 메서드를 호출하면 현재 경로를 명시적으로 닫을 수 있지만 경로가 지워지지는 않습니다.

다음은 경로를 그리는 몇 가지 방법에 대한 프로토타입입니다.

void moveTo(x, y);

은 경로의 시작점을 명시적으로 지정하는 데 사용됩니다. 기본적으로 첫 번째 경로의 시작점은 캔버스의 (0, 0) 지점이고, 이후 시작점은 이전 경로의 끝점입니다. 두 매개변수는 시작점을 나타내는 x, y 좌표값으로 나누어진다.

void lineTo(x, y);

은 시작점에서 지정된 위치까지 직선 경로를 그리는 데 사용됩니다. 그리기가 완료된 후 그려진 시작점이 지정된 위치로 이동합니다. 매개변수는 지정된 위치의 x 및 y 좌표 값을 나타냅니다.

void ret(왼쪽, 위쪽, 너비, 높이);

은 알려진 왼쪽 위 꼭지점 위치, 너비 및 높이를 사용하여 직사각형을 그리는 데 사용됩니다. 그리기가 완료된 후 컨텍스트의 그리기 시작점이 직사각형의 왼쪽 위 꼭지점으로 이동합니다. 매개변수는 직사각형의 왼쪽 상단 모서리의 x 및 y 좌표와 직사각형의 너비 및 높이를 나타냅니다.

void arcTo(x1, y1, x2, y2,radius);

은 두 선분에 접하는 호를 그리는 데 사용됩니다. 두 선분은 현재 컨텍스트 그리기 시작점과 (x2, y2) 점을 시작점으로 사용하고, 둘 다 (x1, y1에서 끝납니다. ) 점 호의 반경은 반경입니다. 그리기가 완료된 후 그리기 시작점은 (x2, y2)에서 시작하는 선분과 호 사이의 접선점으로 이동합니다.

공허한 호(x, y, radius,startAngle, endAngle, 반시계 방향);

은 (x, y) 점을 중심으로, radius를 반경으로, startAngle을 시작 라디안으로, endAngle을 끝 라디안으로 사용하여 호를 그리는 데 사용됩니다. anticlockwise는 부울 매개변수입니다. true는 시계 반대 방향, false는 시계 방향을 의미합니다. 매개변수의 두 라디안은 0°로 표시되고 위치는 3시입니다. Math.PI 값은 180°를 나타내고 위치는 9시입니다.

void QuadraticCurveTo(cpx,cpy, x, y);

은 현재 컨텍스트 그리기 시작점을 시작점으로, (cpx, cpy)점을 제어점으로, (x, y)점을 끝점으로 하여 2차 스플라인 경로를 그리는 데 사용됩니다.

void bezierCurveTo(cpx1,cpy1, cpx2, cpy2, x, y);

은 현재 컨텍스트 그리기 시작점을 시작점으로, (cpx1, cpy1) 점과 (cpx2, cpy2) 점을 두 제어점으로, (x, y) 점을 사용하여 베지어 곡선 경로를 그리는 데 사용됩니다. 끝점.

경로 그리기가 완료된 후 Context 개체의 fill() 및 스트로크() 메서드를 호출하여 경로를 채우고 경로 선을 그리거나, 클립() 메서드를 호출하여 캔버스 영역을 잘라야 합니다. 위 세 가지 메소드의 프로토타입은 다음과 같습니다.

void 스트로크();

기존 경로에 따라 선을 그리는 데 사용됩니다.

채우기 없음();

현재 채우기 스타일을 사용하여 경로 영역을 채우는 데 사용됩니다.

클립 무효화();

기존 경로에 따라 캔버스에 클리핑 영역을 설정하는 데 사용됩니다. Clip() 메서드를 호출한 후 그래픽 그리기 코드는 클리핑 영역에서만 유효하며 영역 외부의 캔버스에는 더 이상 영향을 미치지 않습니다. 호출 전에 경로가 그려지지 않은 경우(즉, 기본 상태) 결과 클리핑 영역은 전체 캔버스 영역입니다.

또한 Context 개체는 아래와 같이 선 및 채우기 스타일을 조정하는 해당 속성도 제공합니다.

스트로크스타일

선 색상, 기본값은 "#000000"이며, 해당 값은 CSS 색상 값, 그라디언트 개체 또는 패턴 개체로 설정할 수 있습니다.

채우기 스타일

채우기 색상의 기본값은 "#000000"입니다. 스트로크 스타일과 마찬가지로 값은 CSS 색상 값, 그라데이션 개체 또는 패턴 개체로 설정할 수도 있습니다.

선너비

선의 너비, 단위는 픽셀(px), 기본값은 1.0입니다.

라인캡

라인의 끝점 스타일은 버트(없음), 라운드(둥근 헤드), 스퀘어(스퀘어 헤드)의 세 가지 유형 중에서 선택할 수 있습니다. 기본값은 버트입니다.

lineJoin

선의 전환점 스타일에는 원형(둥근 모서리), 경사(평평한 모서리), 마이터(뾰족한 모서리) 등 세 가지 스타일이 있으며 유형을 선택할 수 있으며 기본값은 마이터입니다.

miterLimit

선의 날카로운 모서리를 접는 샤프 프로그램으로 기본값은 10입니다.

다음 예에서는 위의 메서드와 속성 중 일부를 호출하여 그래픽을 그립니다.

코드 복사

코드 다음과 같습니다:

브라우저가 캔버스 요소를 지원하지 않습니다!

< ;/canvas>

캔버스 배경

위의 예에서는 fillRect() 메서드가 호출됩니다. 실제로 Context 객체에는 경로 없이 캔버스에 직접 그래픽을 그릴 수 있는 3가지 메소드가 있습니다. 캔버스 배경에 직접 그리는 것으로 볼 수 있습니다. 이 세 가지 메소드의 프로토타입은 다음과 같습니다.

void fillRect(왼쪽, 위쪽, 너비, 높이);

현재 fillStyle(기본값은 "#000000", 검정색) 스타일을 사용하여 (왼쪽, 위쪽) 지점의 왼쪽 위 모서리 꼭지점, 너비는 너비, 높이는 높이로 직사각형을 채우는 데 사용됩니다.

void 스트로크Rect(왼쪽, 위쪽, 너비, 높이);

은 현재 선 스타일을 사용하여 왼쪽 위 모서리 정점을 (왼쪽, 위쪽) 지점에 두고 너비는 너비로, 높이는 높이로 직사각형 테두리를 그리는 데 사용됩니다.

voidclearRect(왼쪽, 위쪽,너비, 높이);

왼쪽 위 꼭지점이 (왼쪽, 위쪽) 지점에 있고 너비가 너비로, 높이가 높이로 직사각형 영역 내의 모든 콘텐츠를 지우는 데 사용됩니다.

사진

컨텍스트 객체에는 외부 이미지를 캔버스에 그리는 drawImage() 메서드가 있습니다. drawImage() 메서드의 세 가지 프로토타입은 다음과 같습니다.

drawImage(이미지, dx, dy);

drawImage(이미지, dx, dy,dw, dh);

drawImage(image, sx, sy,sw, sh, dx, dy, dw, dh);

다음 그림은 프로토타입의 각 매개변수의 의미를 보여줍니다.

그 중 이미지 매개변수는 HTMLImageElement, HTMLCanvasElement 또는 HTMLVideoElement일 수 있습니다. 세 번째 메소드 프로토타입의 sx와 sy는 처음 두 개에서 모두 0이고, sw와 sh는 모두 이미지 자체의 너비와 높이입니다. 두 번째와 세 번째 프로토타입의 dw와 dh도 모두 첫 번째 프로토타입에 있습니다. 이미지 자체의 너비와 높이입니다.

다음 예에서는 원격 이미지를 캔버스에 그립니다.

코드 복사

코드는 다음과 같습니다.

브라우저가 캔버스 요소를 지원하지 않습니다!

위 코드가 전달됩니다. Google Chrome 14.0 및 Mozilla Firefox 7.0 브라우저 테스트를 통해