캔버스는 몇 가지 간단한 API를 통해 멋진 스타일을 그릴 수 있습니다.
페인팅 할 때 캔버스는 직물과 동일하며 컨텍스트는 브러시와 같습니다.
1. 선을 그리십시오moveto (x0, y0) : 현재 브러시 (ICTX)를이 위치 (x0, y0)로 이동하십시오.
Lineto (x1, y1) : 현재 위치 (x0, y0)에서 (x1, y1)으로 직선을 그립니다.
시작 경로 () : 경로를 열거나 현재 경로를 재설정하십시오.
ClosePath () : 현재 지점에서 경로의 시작점, 즉 이전 시작 경로의 위치, 피하기 및 경로로 돌아갑니다.
스트로크 () : 드로우. 이 기능은 그림을 그리려면 추가되어야하므로 끝에 배치해야합니다.
var icanvas (); ictx ();
효과:
ClosePath가 스트로크 기능 뒤에 배치되면 닫힌 선으로 그려지지 않으므로 닫기 전에 그려지기 때문에 왼쪽의 직선이 그려지지 않습니다.
2. 라인 스타일Linecap : 라인 엔드 포인트 스타일, 엉덩이, 랜드, 사각형.
LINEJOIN : 전환점 스타일 두 줄이 교차시킬 때 Miterlimet을 통해 변곡점의 교차점에서 최대 길이를 설정할 수도 있습니다.
miterlimet : 퇴적물의 길이가 miterlimit의 값을 초과하면, 모서리가 Bevel 유형의 linejoin에 표시됩니다.
linewidth : 선 너비
뇌졸중 : 라인 색상, 그라디언트 (정의 된 그라디언트 객체), 모드. Context.strokesty =#333;
var icanvas (icanvas) , 10); ICTX.Stroke (); 다시 검은 대각선, 총 3 줄. ICTX.LLINECAP = 10;
The BeginPath와 ClosePath는 쌍으로 나타날 수 없습니다.
3. 곡선을 그립니다아크 (x, y, radius, startangle, endangle, anticlockowise) : 곡선, 반경은 곡선 반경, 시작 앵글, 흡기 각도 및 종말 각도, Arc (math.pi/180)*각도 값, anticlockw ise drawing direction 항목
arcto (x1, y1, x2, y2, radius) : 두 개의 절단 선 전에 곡선을 그립니다.
ICTX.BEGINPATH (); / ARCS ICTX.LINETO 생성 (150,120);
수평선의 시작점과 수평 종점의 연결을 수평선 설정의 끝점에 연결합니다.
2 차 urveto (x1, y1, x2, y2) : 2 개의 베셀 곡선. (x1, y1) 제어점의 좌표, (x2, y2) 종점의 좌표
Beziercurveto (x1, y1, x2, y2, x, y) : 3 개의 베셀 곡선. (x1, y1) 제어점 1, (x2, y2) 제어점 2 좌표 (x, y) 종점의 좌표.
베셀 곡선은 매우 부드러운 곡선을 그릴 때 매우 유용합니다.
4. 사각형과 충전물을 그립니다rect () : 사각형 생성;
FILECT (x, y, 너비, 높이) : 채워진 사각형을 그리십시오 : (x, y) 시작점, 너비, 높이 너비 높이 높이 높이 높이 높이 높이 높이
Strokerect () : 직사각형 와이어 프레임을 그립니다
ClearRect () : 사각형을 지우십시오.
ICTX.FILLSTYLE =#0000ff;5. 펜 속성
FillStyle : 색상, 그라디언트 또는 패턴 (Patten)을 설정합니다.
뇌졸중 : 컬러, 그라디언트 또는 브러시 패턴
6. 그림자를 그립니다ShadowColor : Shadow Yanse
Shadowblur : 흐릿한 수준
ShadowOffsetX : Shadow의 수평 거리
Shadowoffsety : 그림자의 수직 거리
ICTX.SHADOWCOLOR =#456;7. 그라디언트 드로우
CreateLineargradient (x1, y1, x2, y2) : 드로우 선형 그라디언트 (x1, y1)는 그라디언트의 시작점 (x2, y2)은 다른 구배의 종말점입니다.
Createradialgradient (x1, y1, r1, x2, y2, r2) : 방사형 구배 : (x1, y1)는 그라디언트의 출발점, r1은 반경, (x2, y2)는 그라디언트의 끝점입니다. R2 종말점 반경입니다.
두 등급 모두 사용해야합니다
AddColorsStop (정지, 색상)은 그라디언트 프로세스를 설정하도록 설정되었으며 값은 0.0 ~ 1.0입니다.
var grd. // 여기서는 값을 충전시킨다 (200,150,150,100);8. 배경을 채우십시오
CreatePattern (이미지, 반복 | 반복 | 반복 | 반복 | 반복) : 이미지는 그림 객체이며 후속 매개 변수는 그림의 반복적 인 메소드를 설정하는 데 사용됩니다.
9. 기타 관련 API채우기 () : 현재 경로를 채우십시오.
ispointinpath () : ictx.ispointinpath (x, y);
캔버스 제거 : 캔버스의 너비와 높이, icanvas.height, icanvas.width;
캔버스의 너비를 수정하십시오. icanvas.width = '200';
GlobalPha : 투명성을 0 ~ 1 숫자 만 설정하면 두 번째를 그리기 전에 다시 설정하십시오.
Todataurl : icanvas.todataurl (type, encderoptions),이 함수는 이미지에서 URI를 반환하고 매개 변수는 이미지/jpeg, image/webp와 같은 이미지 유형을 설정할 수 있습니다 0 ~ 1 숫자는 이미지/jpeg, 이미지/Webp의 화질을 설정하는 데 사용되며 다른 형식의 타이핑 세트이 매개 변수는 유효하지 않습니다.
10. 보물클립 () : 캔버스의 모든 모양과 크기의 캔버스는 모든 도면이 재생 영역으로 제한됩니다. 이 방법은 일반적으로 직사각형, 둥근 모양과 같은 경로와 함께 사용됩니다.
ICTX.ARC (100,100,50)*0, (Math.Pi/180)*360, ICTX.FillStyle = Green; ;
여전히 외부 캔버스를 작동하려면 Save () 함수를 사용하여 절단하기 전에 저장하고 Restore () 함수를 사용하여 절단 후 이전에 저장된 상태를 복원하지만 중간의 작동은 사라지지 않습니다.
위는이 기사의 모든 내용입니다.