집 > 기사 > 웹 프론트엔드 > HTML5 캔버스의 일반적인 그리기 기술

HTML5 캔버스의 일반적인 그리기 기술

H5에서는 canvas 요소를 사용하여 그래픽을 그리는 경우가 많습니다. 그래서 오늘은 캔버스 사용법과 어떤 상황에서 캔버스를 사용할 수 있는지 소개하겠습니다. 그리고 캔버스 페인팅 기술

캔버스는 페이지에 그래픽을 그리는 데 사용됩니다.

캔버스 개요:

html5 캔버스 요소와 javascript는 페이지에 그래픽을 그리는 데 함께 사용됩니다.

캔버스는 캔버스이고 경로 직사각형입니다. 캔버스에 그려집니다. 원...

canvas 그리기 그래픽: --->javascript draw

캔버스 자체는 그렇지 않습니다. 그리기능력, 그리기 작업 요소

element.getContext("2d") HTML5의 내장

object

가져오기, 2D 그래픽 그리기, 직사각형 그리기, 경로, 원형 문자... 및 기타 방법 cxt .fillStyle = "#ff0000"; //채우기 색상 그리기

cxt.fillRect(25,10,150,75);//x,y,w,h 결정 25,10 시작점 좌표 모양

참고: 캔버스는 지원되지 않습니다

cxt.moveTo(10,10); 원래 시작점

cxt.lineTo(150,50); 원래 시작점의 끝점은 동일한 2D 그래픽의 다음 직선의 시작점입니다.

cxt.Stroke(); 출력

Rectangle:

cxt.StrokeStyle = "#ff0000"; 직사각형 테두리 색상

사용 사용 사용 사용 사용 사용 ‐ ‐ ‐ ‐‐‐ cxt.fillStyle = "# ff0000";

cxt.fillRect(10,10,150,150); 채우기 position

원 그리기:

1》 Html5 원의 각도

2》 원 그리기

cxt.arc(x,y,radius,startAngle, Endangle, 기타 매개변수(TRUE 반시계 방향 false 시계 방향)

x, y 시작점

반경 반경

시작각 시작점 번호

Endangle 끝점

삼각형 그리기

Beginpath () 그리기 시작 경로

캔버스 요소 지우기:

Cxt.clearRect(x,y,width,height) (x,y)의 너비와 높이 범위에서 캔버스 요소 지우기

캔버스의 상태 저장 및 복원

저장된 상태의 Cxt.save( )

Cxt.restore()는 테두리 및 채우기 색상을 포함하여 저장된 상태를 복원합니다

좌표 공간 이동:

사용 사용 사용 사용 ‐‐ ‐ ‐ ‐‐ ‐‐‐

의 원본 0, 0 --->150,150

위는 캔버스 요소에 대한 개요입니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!