주석 : 캔버스의 기본 너비와 높이는 300과 150입니다. 예외를 피하기 위해서는 CSS를 사용하여 너비와 높이를 추가하는 대신 디스플레이 속성을 사용하는 것이 가장 좋습니다. 아래는 캔버스 사용에 대한 예방 조치에 대한 간단한 소개입니다. 관심있는 친구들이 그것을 언급 할 수 있습니다. 나는 그것이 당신에게 도움이되기를 바랍니다.
1. Canvas 중국 튜토리얼 https://developer.mozilla.org/zh-cn/docs/canvas_tutorial2. 캔버스의 기본 너비와 높이는 300과 150입니다. 예외를 피하기 위해 CSS를 사용하여 너비와 높이를 추가하는 대신 디스플레이 속성을 사용하는 것이 가장 좋습니다.
3. 캔버스 태그 내부의 캔버스 태그를 지원하지 않는 브라우저 추가에 대한 지침
4. 브라우저가 다음 JS 코드를 통해 캔버스를 지원하는지 여부를 결정할 수도 있습니다.
var canvas = document.getElementById ( '튜토리얼');
if (canvas.getContext) {
var ctx = canvas.getContext ( '2d');
// 여기에 코드를 그리십시오
} 또 다른 {
// 캔버스-지원되지 않은 코드는 여기에 있습니다
}
5. 캔버스는 하나의 기본 모양, 즉 사각형의 도면 만지지하지만 다른 수치는 캔버스 경로를 통해 그릴 수 있습니다.
6. 사각형을 그리는 네 가지 기능이 있습니다 : rect, fillErct, Strokerect 및 ClearRect
7. 시작 경로의 기능은 새로운 경로 레이어를 시작하는 데 사용됩니다. 추가하지 않으면 원래 경로 레이어를 그리는 것을 의미합니다. 다음 두 코드의 효과는 완전히 다릅니다. 첫 번째 코드는 두 개의 빨간색 선이 표시되고 두 번째 코드는 검은 색 선과 빨간색 선을 보여줍니다.
var ctx = document.getElementById ( 'cvs'). getContext ( '2d');
ctx.beginpath ();
Ctx.Moveto (100.5,20.5);
Ctx.Lineto (200.5, 20.5);
ctx.stroke ();
Ctx.Moveto (100.5,40.5);
Ctx.Lineto (200.5, 40.5)
ctx.strokestyle = '#f00';
ctx.stroke ();
var ctx = document.getElementById ( 'cvs'). getContext ( '2d');
ctx.beginpath ();
Ctx.Moveto (100.5,20.5);
Ctx.Lineto (200.5, 20.5);
ctx.stroke ();
ctx.beginpath ();
Ctx.Moveto (100.5,40.5);
Ctx.Lineto (200.5, 40.5)
ctx.strokestyle = '#f00';
ctx.stroke ();
8. 경로가 닫기 위해 필요하지 않은 경우 Closepath를 사용할 수 있습니다. 채우기를 사용하면 경로가 자동으로 닫힙니다. 더 이상 ClosePath를 사용할 필요가 없습니다.
9. 충분한 인내심이있는 한 Bezier 곡선을 사용하여 그림을 그릴 수 있습니다.
10. Firefox 아래의 2 차 곡선에 버그가 있으므로 2 차 곡선 대신 입방 곡선을 사용할 수 있습니다.
11. 이미지 (예 : PNG, GIF, JPEG 등)를 캔버스에 도입 할 수 있으며 다른 캔버스 요소도 이미지의 소스로 사용할 수 있습니다.
12. 아래는 이미지 또는 캔버스 객체 인 기본 캔버스 이미지 그리기 코드입니다. x와 y는 대상 캔버스에서 시작 좌표입니다.
DrawImage (image, x, y)
다음 코드는 확대 된 이미지, 너비 및 높이를 나타냅니다.
DrawImage (이미지, x, y, 너비, 높이)
다음 코드는 클리핑 이미지를 나타냅니다. 첫 번째 매개 변수는 다른 모수와 동일하며 둘 다 한 이미지 또는 다른 캔버스에 대한 참조입니다. 다른 8 개의 매개 변수는 각각 그림에서 컷의 시작 X 좌표, 그림에서 컷의 시작 y 좌표, 절단 영역의 폭, 절단 영역의 높이, 그려진 위치의 x 좌표, 드로잉 위치의 y 좌표, 드로우 겨울의 폭, 크기의 크기와 크기가 다를 수 있습니다. 그린 그림.
DrawImage (image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight)
13. Strokestyle은 그래픽 윤곽의 색상을 설정하는 데 사용되는 반면 FillStyle은 채우기 색상을 설정하는 데 사용됩니다. 색상은 CSS 색상 값을 나타내는 문자열, 그라디언트 객체 또는 패턴 객체 일 수 있습니다. 기본적으로 라인과 채우기 색상은 검은 색입니다 (CSS 색상 값 #000000).
14. 이미지 투명성은 GlobalAlpha = 투명도 값 또는 RGBA 색 값으로 표현할 수 있습니다.
15. linewidth 속성은 전류로 그린 선의 두께를 설정합니다. 1px 선 너비 버그를 해결하기 위해 +0.5를 사용하여 해결합니다.
16. Linecap 속성의 가장 왼쪽 줄에있는 선은 기본 엉덩이를 사용합니다. 보조 라인과 플러시된다는 점에 유의 할 수 있습니다. 가운데에는 둥근 효과가 있으며, 반경이 반경의 반원은 끝점에 추가됩니다. 오른쪽에는 정사각형의 효과가 있으며, 정사각형이 동일하고 최종점에 추가 된 선 너비의 높이가 높아집니다.
17. 여기서 나는 또한 다른 라인 조인 값을 설정하기위한 3 개의 폴리 라인을 사용합니다. 상단은 둥근 효과이며 가장자리와 모서리가 둥글고 원의 반경은 선 너비와 같습니다. 중간과 바닥은 각각 Bevel과 Miter의 효과입니다. 값이 Miter 일 때, 라인 세그먼트는 한 지점에서 교차 할 때까지 연결 외부로 확장됩니다. 확장 효과는 아래에 소개되도록 miterlimit 속성에 의해 제한됩니다.
18. 저장 및 복원 방법은 캔버스 상태를 저장하고 복원하는 데 사용되며 매개 변수도 없습니다. 캔버스 상태는 현재 화면에 적용되는 모든 스타일과 변형의 스냅 샷입니다. 캔버스 상태는 힙 (스택) 형태로 저장됩니다. 저장 방법이 호출 될 때마다 현재 상태가 힙으로 밀려 나게됩니다. 복원 방법이 호출 될 때마다 이전에 저장된 상태가 힙에서 팝업되고 모든 설정이 복원됩니다.
19. 변환 (1, 0, 0, 1, 0, 0) 매개 변수는 수평 스케일링, 수평 회전 (시계 방향), 수직 회전 (시계 반대 방향), 수직 스케일링, 수평 오프셋, 수직 오프셋을 나타냅니다.
setTransform (1, 0, 0, 1, 0, 0)은 이전 변환 행렬을 재설정 한 다음 새 행렬을 구축하는 것을 의미합니다. 매개 변수는 위와 동일합니다
회전 (각도), (1 개의 반경은 1 라디안, 2πr/r = 라디안, 즉 360 = 2π, 즉 1 = π/180입니다).
20. 애니메이션은 실제로 Artboard (ClearRect ())을 지속적으로 지우고 다시 페인트합니다.