<script type = "text/javaScript">
노력하다
{
document.createElement ( "canvas"). getContext ( "2d");
document.getElementById ( "support"). innerHtml = "OK";
}
캐치 (e)
{
document.getElementById ( "support"). innerhtml = e.message;
}
</스크립트>
캔버스에 가입하십시오 <Canvas ID = 대각선 스타일 = 테두리 : 1px Solid Blue; 너비 = 200 높이 = 200/>// 캔버스 요소와 그 그리기 컨텍스트를 가져옵니다 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.FillStyle = #339900; context.fill (); 사각형을 그립니다우리는 나무에 트렁크를 추가합니다
Context.FillStyle = '#663300'; context.fillRect (-5, -50, 10, 50); 곡선을 그리십시오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 ();
}
사진 표시 :
// 배경 컨텍스트로 배경 패턴으로 채우십시오. DrawImage (Bark, -5, -50, 10, 50); 구배그라디언트 사용에는 세 가지 단계가 필요합니다.
(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에서 선택할 수 있습니다.
| 타일링 방법 | 중요성 |
| 반복하다 | (기본값) 그림은 두 방향으로 기울어집니다 |
| 반복 -X | 수평 평면 타일링 |
| 반복 | 수직 플랫 타일링 |
| 반복되지 않습니다 | 사진은 타일이 아닌 한 번만 표시됩니다 |
스케일링 함수 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 ();
그림자그림자는 몇 가지 글로벌 컨텍스트 속성을 통해 제어 할 수 있습니다
| 재산 | 값 | 주목 |
| ShadowColor | 모든 CS의 색상 값 | 투명성 (알파)을 사용할 수 있습니다 |
| ShadowOffsetx | 픽셀 값 | 값은 양수이며 그림자를 오른쪽으로 옮깁니다. 부정적이고 그림자를 왼쪽으로 옮깁니다 |
| 섀도우 오프 세트 | 픽셀 값 | 값은 양수이며 그림자를 아래쪽으로 이동하십시오. 부정적이고 그림자를 위로 움직입니다 |
| 섀도우 블러 | 가우스 퍼지 가치 | 가치가 클수록 그림자의 가장자리가 더 흐릿합니다. |
// 검은 색, 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 : 현재 캔버스에 제시된 데이터는 프로그래밍 방식으로 얻을 수 있습니다. 얻은 데이터는 텍스트 형식으로 저장되며 브라우저는 이미지로 구문 분석 할 수 있습니다.