24가지 기본 캔버스 지식_html5 튜토리얼 기술 요약-H5 튜토리얼-php.cn

24가지 기본 캔버스 지식_html5 튜토리얼 기술 요약

WBOY

풀어 주다： 2016-05-16 15:47:07

원래의

1225명이 탐색했습니다.

이제 언제든지 쉽게 참고할 수 있도록 캔버스의 지식 포인트를 다음과 같이 정리합니다.

1. 채워진 직사각형 fillRect(x,y,width,height);

2. 직사각형 테두리 그리기 스트로크Rect(x,y,width,height);

3. 직사각형 지우기clearRect(x,y,width,height);

4. 채우기 스타일 fillStyle="red" 스타일은 색상, 그라데이션, 이미지일 수 있습니다.

5. 획 스타일 스트로크스타일="red";

6. 획 선의 너비 lineWidth=4;

7. 선 끝 모양 lineCap="butt", 기본적으로는 엉덩이입니다.

8. 선 교차 스타일 lineJoin="miter"; 원형(둥근 모서리)/베벨(베벨), 기본 날카로운 모서리;

9. 경로 그리기 시작 startPath();

10. 경로 종료 closePath(); 경로를 생성한 후 경로의 시작점에 연결되는 선을 그리려면 closePath();를 호출하면 됩니다.

11. 호 그리기 arc(x,y,radius,startAngle,endAngle,true/false);

12. 호 그리기 arcTo(x1,y1,x2,y2,radius) 이전 점에서 시작하여 x2, y2에서 끝나고 주어진 반경으로 통과하는 호를 그립니다. x1,y1;

13. moveTO(x,y); 선을 그리지 않고 그리기 커서를 (x, y)로 이동

14.lineTo(x,y); 이전 지점에서 시작하여 직선을 그립니다.

15. 이차 베지어 곡선: QuadraticCurveTo(cx,cy,x,y); 이전 점에서 시작하여 x, cx, cy에서 끝나는 이차 곡선을 그립니다. .

16. 3차 베지어 곡선: bezierCurveTo(cx1,cy1,cx2,cy2,x,y); 이전 점에서 시작하여 x, y, cx1, cy1에서 끝나는 2차 곡선을 그립니다. cx2,cy2를 제어점으로 사용합니다.

17.Rect(x,y,width,height);x, y 지점에서 시작하여 너비와 높이를 각각 지정합니다. 이 방법은 독립적인 모양이 아닌 직사각형 경로를 그립니다.

18. 텍스트 그리기:

　(1) 텍스트 채우기: fillText("hello",x,y,width); 너비는 선택적인 최대 픽셀 너비입니다. 텍스트가 최대 너비보다 크면 텍스트가 최대 너비에 맞게 줄어듭니다.

　(2) 텍스트 스트로크: 스트로크텍스트("hello",x,y,width);width는 선택적 최대 픽셀 너비입니다.
　(3) 텍스트 스타일:font="bold 14px Arial";
　(4) 가로 텍스트 정렬: textAlign='start'; // 시작, 끝, 왼쪽, 오른쪽, 가운데. 기본값: 시작. 텍스트의 시작점(x, y)을 기준점으로 세로축을 정렬합니다.
　(5) 세로 텍스트 정렬: textBaseline='alphabetic'; //상단, 내어쓰기, 중간, 알파벳, 표의 문자, 하단. 기본값: 알파벳. 텍스트의 시작점(x, y)을 기준점으로 가로축을 정렬합니다.
(6) 텍스트 너비: var text="hello"; var length=context.measureText(text) 매개변수 텍스트는 그려질 텍스트입니다.

19. 변신

　(1) 회전(각도): 원점을 중심으로 이미지 각도를 회전합니다.

transform(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은 이전에 x, y로 표현되었던 점이 됩니다. 변환(1,0,0,1,x,y);
　(4) 변환(, , ,,x, y를 사용할 수도 있습니다. ) ;
　(5) setTransform(, , ,,x, y); 변환 행렬을 기본 상태로 재설정한 다음 변환()을 호출합니다. ;

20. 그래픽 조합

코드 복사코드는 다음과 같습니다.

context.fillStyle="blue";
context.fillRect(10,10,100,100);
context.globalCompositeOperation='lighter'; 선택 값은 /* */와 같습니다.
context.fillStyle="red";
context.arc(110,60,50,0,Math.PI*2,false);
context.fill();
/*
source-over (기본값):
destination-over: 원본 그래픽 아래에 새 그래픽 그리기
source-in: 새 그래픽과 원본 그래픽 간의 in 연산을 수행하고 차이점만 표시 새 그래픽과 원본 그래픽 사이 그래픽이 겹치는 부분
destination-in: 원본 그래픽과 새 그래픽이 와 같이 동작하고, 새 그래픽에서 원본 그래픽과 겹치는 부분만 표시됩니다
source-out : 새 그래픽과 원본 그래픽을 out으로 연산, 새 그래픽에서 원본 그래픽과 겹치지 않는 부분만 표시
destination-out : 새 그래픽과 원본에 out 연산 수행 그래픽, 새 그래픽에서 원본 그래픽과 겹치지 않는 부분만 표시
source- atop: 새 도형에서 원래 도형과 겹치는 부분과 겹치지 않는 원래 도형만 그립니다
destination -atop: 원래 도형에서 새 도형과 겹치는 부분만 그리고 새 도형의 다른 부분만 그립니다
더 가볍게: 원래 도형과 새 도형을 모두 그리고 겹치는 부분을 색칠합니다 >*/

21. 그래픽 그림자 그리기

코드 복사

코드는 다음과 같습니다.

context.shadowOffsetX=10; //Shadow 그림자의 가로 변위

context.shadowOffsetY=10; //그림자의 세로 변위

context.shadowColor='rgba(100,100,100,0.5)' //그림자의 색상
context.shadowBlur=7; //흐릿한 그림자 범위

22. 이미지 그리기, 타일링, 자르기

코드 복사

코드는 다음과 같습니다.

context.drawImage(image, x,y );

context.drawImage(image,x,y,w,h);

context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);sx ,sy 및 sw, sh는 원본 이미지의 복사된 영역의 시작 좌표와 높이이고, dx, dy 및 dw, dh는 복사된 영역의 대상 좌표와 높이입니다.
context.createPattern(image,type); 이미지 타일, 매개변수는 다음과 같습니다: no-repeat,repeat-x,repeat-y,repeat;
context.clip() //자르기 기능

예:

코드 복사

코드는 다음과 같습니다.

image=new Image() ; // 이미지 객체 생성

image.src="../images/wukong.gif";

var test=context.createPattern(image,'repeat-y');//createPattern은 타일링을 설정합니다. effect,
context.fillStyle=test;
context.fillRect(0,0,400,400);
image.onload=function() { //이 메소드의 목적은 다음과 같은 경우 이미지가 처리되는 것을 방지하는 것입니다. 이미지는 상대적으로 큰 네트워크 이미지 파일이므로 모든 것이 로드될 때까지 이미지가 표시되지 않으므로 로드하는 동안 그릴 수 있습니다.
drawImg(context,image);
}
function drawImg(context,image){
//원본 이미지 그리기
context.drawImage(image,10,10,125,125);
//부분 확대
context.drawImage(image,20,0,90,100,150,10,125,125);
context.ect(20,20,80,80);
context.clip();
context.drawImage(이미지,0,0,200,200);
}

23. 저장 및 복원

contex.save(); 현재 상태를 스택에 저장합니다. 참고: 저장되는 것은 그려진 그래픽의 설정 및 변환뿐이며 그려진 그래픽의 내용은 아닙니다. context.restore(); 스택에서 이전에 저장된 그래픽 상태를 검색합니다.

적용 가능한 경우:

(1) 이미지 또는 그래픽 변형
(2) 이미지 자르기
(3) 변경 시 그래픽 컨텍스트의 속성: fillStyle, 글꼴, globalAlpha, globalComposite-Operation, lineCap, lineJoin, lineWidth, miterLimit, ShadowBlur, ShadowColor,
shadowOffsetX, ShadowOffsetY, 스트로크스타일, textAlign, textBaseline

24. 선형 그래디언트

코드 복사

코드는 다음과 같습니다.

var g=context.createLinearGradient (xStart, yStart,xEnd,yEnd);

var g1=context.createRadialGradient(xStart,yStrat,radiusStrat,xEnd,yEnd,radiusEnd);

g.addColorStop(0,'red');
g.addColorStop (0,'green');
context.fillStyle=g;
context.fillRect(0,0,200,200);