html5-Canvas는 web_html5 튜토리얼 스킬로 다양한 그래픽을 그릴 수 있습니다

HTML5에서 가장 중요한 것은 웹에서 다양한 그래픽을 그릴 수 있게 해주는 Canvas의 도입이라고 생각합니다. 이것만으로도 웹과 데스크톱 프로그램 사이가 약간 모호한 것 같습니다. HTML5 외부의 웹에는 VML 및 SVG와 같은 XML 기반 그림도 있습니다. 캔버스는 픽셀 기반 그림입니다. Canvas는 드로잉 보드에 해당하는 HTML 노드입니다. 그림을 작업하려면 js를 사용해야 합니다.
다음과 같습니다:
귀하의 브라우저는 아직 정의를 지원하지 않습니다.
var c=document.getElementById("myCanvas")로 캔버스 객체를 가져올 수 있습니다. 해당 js 속성 메서드는 다음과 같습니다.
1: 렌더링 객체 그리기 , c.getContext( " 2d"), 2D 그리기 객체를 얻으려면 획득한 객체는 우리가 몇 번 호출하더라도 동일한 객체가 됩니다.
2: 그리기 방법 :
clecrRect(left,top,width,height)는 지정된 직사각형 영역을 지우고,
fillRect(left,top,width,height)는 직사각형을 그립니다. 및 fillStyle 채우기.
fillText(text,x,y)는 텍스트를 그립니다.
trokRect(left,top,width,height)는 사각형을 그리고 스트로크 스타일을 사용하여 테두리를 그립니다.
beginPath(): 경로 그리기를 시작하고 경로를 초기 상태로 재설정합니다.
closePath(): 경로 그리기가 종료되고 시작부터 닫힌 곡선이 추가됩니다. 현재 좌표로 이동합니다.
moveTo(x, y): 도면의 실제 좌표를 설정합니다.
lineTo(x, y); 현재 실제 위치에서 x, y까지 직선을 그립니다.
fill(), 스트로크(), 클립(): 그림의 최종 채우기 및 테두리 윤곽선을 완성한 후 해당 영역을 자릅니다.
arc(): 호, 중심 위치, 시작 라디안, 끝 라디안을 그려 호의 위치와 크기를 지정합니다.
직사각형 경로
drawImage(Imag img); 이미지;
quadraticCurveTo(): ​​​​2차 스플라인 경로, 매개변수 2개 제어점;
bezierCurveTo(): ​​​​베지어 곡선, 매개변수 3개 제어점
createImageData, getImageData, putImageData: Canvas 중간 픽셀; 데이터. ImageData는 너비, 높이 및 데이터 데이터를 기록합니다. 여기서 data는
argb로 우리 안료의 기록이므로 배열 크기 길이는 너비*높이*4이고 순서는 rgba입니다. getImageData는 직사각형 영역의 픽셀을 가져오고 putImageData는 직사각형 영역의 픽셀을 설정합니다.
… 등등!
3: 좌표 변환 :
translate(x, y): 평행 변환, 원점을 좌표(x, y)로 이동
rotate(a): 회전 변환, 회전 각도;
크기 조정(x, y): 크기 조정 변환
save(), Restore(): 그리기 상태를 저장하고 복원하기 위한 스택 제공, 저장은 현재 그리기 상태를 스택에 푸시합니다. 복원은 스택을 팝하고, 그리기 상태를 복원합니다.
… 등등!
그래, 너무 늦었어. 첨부된 내용은 내 테스트 코드입니다.

코드 복사

코드는 다음과 같습니다.

탐색 브라우저가 아직 지원하지 않습니다