프로그래밍 html5 캔버스 API

<script type = "text/javaScript">

노력하다

{

document.createElement ( "canvas"). getContext ( "2d");

document.getElementById ( "support"). innerHtml = "OK";

}

캐치 (e)

{

document.getElementById ( "support"). innerhtml = e.message;

}

</스크립트>

// 캔버스 요소와 그 그리기 컨텍스트를 가져옵니다 var canvas = document.getElementById ( "Diagonal");

var context = canvas.getContext ( "2d");

// 절대 좌표로 경로를 만듭니다

context.beginpath ();

컨텍스트 .Moveto (70, 140);

Context.lineto (140, 70);

// 캔버스 에이 선을 그립니다

Context.Stroke ();

위와 동일한 효과는 변환 (스케일링, 번역, 회전)을 통해 달성 할 수 있습니다.

변형에 의해 대각선을 그립니다

// 캔버스 요소와 그 그리기 컨텍스트를 가져옵니다

var canvas = document.getElementById ( "Diagonal");

var context = canvas.getContext ( "2d");

// 현재 도면 상태를 저장합니다

context.save ();

// 도면 컨텍스트를 오른쪽 하단으로 이동합니다

문맥. 트랜스 슬레이트 (70, 140);

// 출발점으로 원점을 가진 이전 라인 세그먼트와 동일한 선 세그먼트를 그립니다.

context.beginpath ();

context.moveto (0, 0);

Context.lineto (70, -70);

context.stroke (); </p> <p> context.restore ();

HTML5 캔버스 API의 경로는 렌더링하려는 모든 모양을 나타냅니다.

beginpath () : 어떤 종류의 그래프를 그리기 시작하든 첫 번째로 전화해야 할 것은 시작 경로입니다. 이 간단한 기능은 매개 변수가 필요하지 않으며 캔버스에게 새 그래프를 그리기 시작한다는 사실을 알리는 데 사용됩니다.

Moveto (x, y) : 도면 없음, 현재 위치를 새 대상 좌표 (x, y)로 이동하십시오.

Lineto (x, y) : 현재 위치를 새 대상 좌표 (x, y)로 이동할뿐만 아니라 두 좌표 사이에 직선을 그립니다.

ClosePath () :이 함수는 Lineto와 매우 유사합니다. 유일한 차이점은 ClosePath가 경로의 시작 좌표를 대상 좌표로 자동 사용한다는 것입니다. 또한 캔버스에게 현재 그려진 그림이 폐쇄되었거나 완전히 밀폐 된 영역을 형성했으며 미래의 충전 및 스트로크에 매우 유용하다는 것을 알립니다.

소나무 캐노피를 그립니다

기능 createcanopypath (컨텍스트) {

// 나무 캐노피를 그립니다

context.beginpath (); </p> <p> context.moveto (-25, -50);

context.lineto (-10, -80);

context.lineto (-20, -80);

context.lineto (-5, -110);

context.lineto (-15, -110); </p> <p> // 나무의 정점

context.lineto (0, -140); </p> <p> context.lineto (15, -110);

context.lineto (5, -110);

Context.lineto (20, -80);

Context.lineto (10, -80);

context.lineto (25, -50);

// 시작점을 연결하고 경로를 닫습니다

context.closepath ();

} </p> <p> 함수 drawTrails () {

var canvas = document.getElementById ( 'Diagonal');

var context = canvas.getContext ( '2d'); </p> <p> context.save ();

context.translate (130, 250); </p> <p> // 캐노피를 표현하는 경로를 만듭니다

createcanopypath (context); </p> <p> // 현재 경로를 그립니다

Context.Stroke ();

Context.Restore ();

} </p> <p> window.addeventListener ( "로드", DrawTrails, True);

스트로크 모드를 통해 캐노피가보다 현실적으로 보일 수 있습니다.

// 라인의 폭

context.linewidth = 4;

// 부드러운 경로의 정션 점

context.linejoin = 'round';

//색상

context.strokestyle = '#663300';

// 현재 경로를 그립니다

Context.Stroke ();

우리는 나무에 트렁크를 추가합니다

context.save ();

Context.Translate (-10, 350);

context.beginpath (); </p> <p> // 첫 번째 곡선은 오른쪽 상단으로 구부립니다

context.moveto (0, 0);

Context.quadraticcurveto (170, -50, 260, -190); </p> <p> // 오른쪽 아래로 구부러집니다

context.quadraticcurveto (310, -250, 410, -250); </p> <p> // 넓은 갈색 뇌졸중으로 경로를 그립니다.

context.strokestyle = '#663300';

context.linewidth = 20;

context.stroke (); </p> <p> // 이전 캔버스 상태를 복원합니다

Context.Restore ();

이미지가 작동하기 전에 완전히로드 될 때까지 기다려야합니다. 브라우저는 일반적으로 페이지 스크립트가 실행되면 이미지를 비동기로로드합니다. 이미지가 완전히로드되기 전에 이미지를 캔버스로 렌더링하려고하면 캔버스에 이미지가 표시되지 않습니다. 따라서 렌더링 전에 이미지가로드되도록 특별한주의를 기울이십시오.

// 사진을로드합니다

var bark = new image ();

bark.src = "bark.jpg"; </p> <p> // 사진이로드 된 후 그림을 호출하십시오.

bark.onload = function () {

DrawTrails ();

}

사진 표시 :

그라디언트 사용에는 세 가지 단계가 필요합니다.

(1) 그라디언트 객체를 만듭니다

(2) 그라디언트 객체의 색상을 설정하고 전환 방법을 나타냅니다.

(3) 컨텍스트에 대한 충전 스타일 또는 스트로크 스타일에 대한 그라디언트 설정

// 트렁크 텍스처로 사용되는 3 차 수평 구배 생성

var trunkgradient = context.createlineargradient (-5, -50, 5, -50); </p> <p> // 트렁크의 왼쪽 가장자리는 평균 갈색입니다.

trunkgradient.addcolorstop (0, '#663300'); </p> <p> // 나무 트렁크의 왼쪽 중간에 이야기 할 색상이 있습니다.

trunkgradient.addcolorstop (0.4, '#996600'); </p> <p> // 오른쪽 가장자리의 색상은 어두워 야합니다.

trunkgradient.addcolorstop (1, '#552200'); </p> <p> // 트렁크를 그라디언트로 채 웁니다

Context.FillStyle = TrunkGradient;

context.fillRect (-5, -50, 10, 50);

// 트렁크에서 캐노피를 투사하기 위해 수직 그라디언트 생성

var canopyshadow = context.createlineargradient (0, -50, 0, 0);

// 투영 그라디언트의 시작점은 투명성이 50% 인 검은 색입니다.

canopyshadow.addcolorstop (0, 'rgba (0, 0, 0, 0.5)');

// 방향은 수직으로 아래쪽으로, 그라디언트는이 길이 밖에서 매우 짧은 거리 내에 완전히 투명하게 변하기가 빨리 변경됩니다.

// 나무 줄기에는 투영이 없습니다.

canopyshadow.addcolorstop (0.2, 'rgba (0, 0, 0, 0.0)'; </p> <p> // 트렁크의 투영 기울기를 채우십시오.

Context.FillStyle = CanopyShadow;

context.fillRect (-5, -50, 10, 50);

// 사진을로드합니다

var gravel = 새로운 이미지 ();

gravel.src = "gravel.jpg";

gravel.onload = function () {

DrawTrails ();

} </p> <p> // 갈색 두꺼운 선을 배경 이미지로 바꾸십시오

context.strokestyle = context.createPattern (자갈, '반복');

context.linewidth = 20;

Context.Stroke ();

Context.CreatePattern의 두 번째 매개 변수는 반복 가능한 마커이며, 적절한 값은 표 2-1에서 선택할 수 있습니다.

스케일링 함수 context.scale (x, y) : x, y는 각각 x와 y의 두 차원의 값을 나타냅니다. 각 매개 변수가 이미지를 표시하면이 방향의 축에서 확대 될 이미지의 양을 전달합니다. x 값이 2 인 경우, 그린 이미지의 모든 요소가 두 배나 넓게됩니다. y 값이 0.5 인 경우, 그린 이미지는 높이의 절반이됩니다.

// 첫 번째 트리를 x = 130, y = 250으로 그립니다

context.save ();

문맥. 트랜스 슬레이트 (130, 250);

DrawTree (컨텍스트);

context.restore (); </p> <p> // 두 번째 트리를 x = 260, y = 500으로 그립니다

context.save ();

context.translate (260, 500); </p> <p> // 두 번째 나무의 높이와 너비를 원본의 두 배로 축소

Context.Scale (2, 2);

DrawTree (컨텍스트);

Context.Restore ();

이미지를 회전하십시오

context.save ();

// 회전 각도 매개 변수는 단위로 라디안에 있습니다

context.rotate (1.57);

Context.DrawImage (MyImage, 0, 0, 100, 100); </p> <p> context.restore ();

변환을 사용하는 방법

// 현재 상태를 저장합니다

context.save (); </p> <p> // y 값이 증가함에 따라 x 값이 증가합니다. 인장 변형의 도움으로

// 그림자로 사용되는 경사 나무를 만들 수 있습니다.

// 변환이 적용된 후 모든 좌표가 행렬에 곱합니다.

context.transform (1, 0,

-0.5, 1,

, 0); </p> <p> // y 축 방향으로 그림자 높이를 60%로 변경

context.scale (1, 0.6); </p> <p> // 검은 색 투명성 20%로 트렁크를 채 웁니다.

context.fillstyle = 'rgba (0, 0, 0, 0.2);

context.fillRect (-5, -50, 10, 50); </p> <p> // 기존 그림자 효과로 나무를 다시 칠하십시오.

Createcanopypath (문맥);

context.fill (); </p> <p> // 이전 캔버스 상태를 복원합니다

Context.Restore ();

context.fillText (텍스트, x, y, maxWidth) : 텍스트 텍스트 내용, x, y 텍스트 위치를 지정하고 maxWidth는 선택적 매개 변수이며 텍스트 위치를 제한합니다.

context.stroketext (텍스트, x, y, maxWidth) : 텍스트 텍스트 내용, x, y 텍스트 위치를 지정하고 maxWidth는 선택적 매개 변수이며 텍스트 위치를 제한합니다.

// 캔버스에 텍스트를 그립니다

context.save (); </p> <p> // 글꼴 크기는 60, 글꼴은 충격입니다

context.font = "60px 충격"; </p> <p> // 색상을 채우십시오

Context.FillStyle = '#996600';

//센터

context.textalign = 'center'; </p> <p> // 텍스트를 그립니다

context.fillText ( '행복한 트레일!', 200, 60, 400);

Context.Restore ();

그림자는 몇 가지 글로벌 컨텍스트 속성을 통해 제어 할 수 있습니다

// 검은 색, 20% 투명성

context.shadowColor = 'rgba (0, 0, 0, 0.2)'; </p> <p> // 15px를 오른쪽으로, 왼쪽으로 10px를 이동

context.shadowoffsetx = 15;

context.shadowoffsety = -10; </p> <p> // 약간 흐릿한 그림자

context.shadowblur = 2;

context.getImageData (sx, sy, sw, sh) : sx, xy는 점, sw : 너비, sh : 높이를 결정합니다.

이 함수는 세 가지 속성을 반환합니다 : 너비 행 높이 당 몇 픽셀 수

데이터 캔버스로부터 얻은 각 픽셀의 RGBA 값 (빨간색, 녹색, 파란색 및 투명성)을 포함하는 배열의 무리.

context.putImagedata (Imagedata, dx, dy) : 개발자가 이미지 데이터 세트를 전달할 수 있습니다. DX, DY는 오프셋을 지정하는 데 사용됩니다. 사용하면 기능이 지정된 캔버스 위치로 이동하여 업데이트됩니다.

들어오는 픽셀 데이터를 표시합니다.

Canvas.todataurl : 현재 캔버스에 제시된 데이터는 프로그래밍 방식으로 얻을 수 있습니다. 얻은 데이터는 텍스트 형식으로 저장되며 브라우저는 이미지로 구문 분석 할 수 있습니다.