이 기사는 주로 매우 포괄적이고 상세하며 모든 사람에게 권장되는 24 개의 기본 지식 요약을 소개합니다.
이제 언제든지 읽을 수 있도록 캔버스의 지식 포인트를 다음과 같이 요약하십시오.
1. 직사각형 충전제 (x, y, 너비, 높이)를 채 웁니다 . 2. 사각형 테두리 스트로커 렉트 (X, Y, 너비, 높이)를 그립니다 . 3. 직사각형을 지우는 (x, y, 너비, 높이)를 지우십시오 . 4. FillStyle = 빨간색; 스타일은 색상, 그라디언트 및 이미지 일 수 있습니다. 5. Strokestyle = 빨간색; 6. 스트로크 라인의 너비 = 4; 7. 선 끝의 모양 Linecap = butt; 엉덩이 (도킹)/둥근 (원)/사각형 (정사각형), 기본적으로 그것은 엉덩이입니다. 8. 라인 교차 스타일 라인 Join = Miter; Miter (Sharp Corner)/Round (둥근 코너)/Bevel (Bevel Corner), 기본 Sharp Corner; 9. 경로 그리기 시작 시작 startPath (); 10. 경로를 종료하십시오 . ClosePath (); 경로를 만들면 경로의 시작점에 연결된 선을 그려 보려면 ClosePath ()를 호출 할 수 있습니다. 11. 아크 아크 (x, y, 반지름, 시작 angle, endangle, true/false)를 그리십시오 . 12. 아크 아크토 (x1, y1, x2, y2, radius) 드로우는 이전 지점에서 x2, y2까지 1 일의 아크를 그리며 주어진 반경으로 x1, y1을 통과합니다. 13. moveto (x, y); 드로잉 선없이 드로잉 커서를 (x, y)로 이동하십시오 14. Lineto (x, y); 이전 지점에서 직선을 그립니다 15. 2 차 Bezier 곡선 : 2 차 urveto (Cx, Cy, X, Y); x, y, cx, cy가 제어점 역할을 할 때까지 이전 지점에서 2 차 곡선을 그리기 시작하십시오. 16. 입방 베 지어 곡선 : Beziercurveto (CX1, CY1, CX2, CY2, X, Y); x, y, cx1, cy1 및 cx2, cy2가 제어점으로 사용될 때까지 이전 지점에서 2 차 곡선을 그리기 시작하십시오. 17. rect (x, y, 너비, 높이); 포인트 x, y에서 시작하면 너비와 높이는 각각 너비와 높이로 지정됩니다. 이 방법은 별도의 모양이 아닌 직사각형 경로를 그립니다. 18. 텍스트 그리기 :(1) 채우기 텍스트 : FillText (Hello, X, Y, 너비); 너비는 선택적 최대 픽셀 너비입니다. 텍스트가 최대 너비보다 크면 최대 너비를 수용하기 위해 텍스트가 줄어 듭니다.
(2) 텍스트 스트로크 : Stroketext (Hello, X, Y, 너비); 폭은 선택적 최대 픽셀 너비입니다.
(3) 텍스트 스타일 : font = bold 14px arial;
(4) 수평 텍스트 정렬 : textalign = 'start'; // 시작, 끝, 왼쪽, 오른쪽, 중앙. 기본값 : 시작하십시오. 세로 축을 텍스트의 시작점 (x, y)과 기본 점으로 정렬하십시오.
(5) 수직 텍스트 정렬 : TextBaseline = 'alphabetic'; // 상단, 교수형, 중간, 알파벳, 아이디어 그래픽, 하단. 기본값 : 알파벳. 수평 축을 텍스트의 시작점 (x, y)과 기본 점으로 정렬하십시오.
(6) 텍스트 너비 : var text = hello; var length = context.measureText (텍스트); 매개 변수 텍스트는 그려야 할 텍스트입니다.
19. 변화
(1) 회전 (각도) : 원점 주위의 이미지의 각도 라디안을 회전시킵니다.
또한 변환 (Math.cos (Angle*Math.pi/180), Math.Sin (Angle*Math.pi/180), -Math.sin (Angle*Math.pi/180), Math.Cos (Angle*Math.pi/180), 0,0)를 사용할 수 있습니다.
(2) scale (x, y) : 이미지를 스케일링하십시오. 변형 (x, 0,0, y, 0,0)을 사용할 수도 있습니다.
(3) 번역 (x, y) : 좌표 원점을 x, y로 이동하십시오. 이 변환을 수행 한 후, 좌표 0과 0은 이전에 x, y로 표시되는 점이됩니다. 변형 (1,0,0,1, x, y)을 사용할 수도 있습니다.
(4) 변환 (<번호>, <번호>, <번호>, <번호>, <번호>, x, y);
(5) settransform (<number>, <number>, <number>, <number>, x, y); 변환 매트릭스를 기본 상태로 재설정 한 다음 transform ()을 호출하십시오.
20. 그래픽 조합 코드를 복사하십시오