캔버스 개체
캔버스 개체는 HTML5의 새로운 기능입니다.
HTML5의 <canvas> 태그는 자바 스크립트, 즉시, 그래픽을 그리는 데 사용됩니다.
캔버스 개체에 액세스
당신은에 액세스 할 수 있습니다 <canvas> 사용하여 요소 getElementById() :
캔버스 개체 만들기
당신은 만들 수 있습니다 <canvas> 사용하여 요소를 document. createElement() document. createElement() 방법 :
참고 : <canvas> 요소는 자신의 더 그리기 능력을 (이 그래픽 만 컨테이너)가 없습니다 - 당신이 실제로 그래픽을 그리는 스크립트를 사용해야합니다.
getContext() 메소드는 캔버스에 그리기위한 방법 및 특성을 제공하는 오브젝트를 반환한다.
이 참조는 속성과 방법 다룰 것입니다 getContext("2d") 캔버스에 - 텍스트, 선, 상자, 원 등을 그리는 데 사용 할 수 있습니다 개체를.
색상, 스타일, 그리고 그림자
| 재산 | 기술 |
|---|---|
| fillStyle | 설정하거나 도면을 채우기 위해 사용되는 색상, 그라디언트 또는 패턴을 반환 |
| strokeStyle | 설정하거나 스트로크에 사용되는 색상, 그라디언트 또는 패턴을 반환 |
| shadowColor | 설정하거나 그림자에 사용하는 색을 돌려줍니다 |
| shadowBlur | 설정하거나 그림자의 흐림 수준을 반환 |
| shadowOffsetX | 설정하거나 모양에서 그림자의 수평 거리를 반환 |
| shadowOffsetY | 설정하거나 모양에서 그림자의 수직 거리를 반환 |
| 방법 | 기술 |
|---|---|
| createLinearGradient() | 선형 구배 만듭니다 (to use on canvas content) |
| createPattern() | 지정된 방향으로 지정된 소자 반복 |
| createRadialGradient() | 반경 / 원형 그라디언트 작성합니다 (to use on canvas content) |
| addColorStop() | 색상을 지정하고 그라데이션 객체의 위치를 중지 |
선 스타일
| 재산 | 기술 |
|---|---|
| lineCap | 설정 또는 라인 엔드 캡의 스타일을 반환 |
| lineJoin | 두 선이 만나는를 설정하거나 생성 코너의 형식을 반환, |
| lineWidth | 설정하거나 현재의 선 폭을 반환 |
| miterLimit | 설정하거나 최대 마이 터 길이를 반환 |
직사각형
| 방법 | 기술 |
|---|---|
| rect() | 사각형을 작성합니다 |
| fillRect() | 립니다 "filled" 사각형을 |
| strokeRect() | 사각형립니다 (no fill) |
| clearRect() | 주어진 사각형 내의 지정된 픽셀 삭제 |
경로
| 방법 | 기술 |
|---|---|
| fill() | 현재 도면 채운다 (path) |
| stroke() | 실제로 사용자가 정의한 경로를 그립니다 |
| beginPath() | 경로를 시작하거나 현재 경로를 재설정 |
| moveTo() | 선을 생성하지 않고, 캔버스에 지정된 점의 경로를 이동 |
| closePath() | 시작 지점으로 다시 현재 위치에서 경로를 작성합니다 |
| lineTo() | 새 점을 추가하고 캔버스에 마지막으로 지정된 점에 그 시점에서의 선을 작성합니다 |
| clip() | 원래 캔버스에서 클립 어떤 모양과 크기의 영역을 |
| quadraticCurveTo() | 이차 베 지어 곡선을 작성 |
| bezierCurveTo() | 큐빅 베 지어 곡선을 작성 |
| arc() | 아크 / 곡선 생성 (used to create circles, or parts of circles) |
| arcTo() | 두 접선 사이의 아크 / 곡선을 작성 |
| isPointInPath() | 지정된 점이 현재 경로에있는 경우는 true, 그렇지 않은 경우는 false를 돌려줍니다 |
변환
| 방법 | 기술 |
|---|---|
| scale() | 현재 도면이 크거나 작은 저울 |
| rotate() | 현재 도면을 회전 |
| translate() | 다시 매핑 (0,0) 캔버스에 위치 |
| transform() | 도면에 대한 현재의 변환 행렬을 대체 |
| setTransform() | 전류는 단위 행렬로 변환 셋트. 그런 다음 실행 transform() |
본문
| 재산 | 기술 |
|---|---|
| font | 설정하거나 텍스트 내용에 대한 현재의 글꼴 속성을 반환 |
| textAlign | 설정하거나 텍스트 내용에 대한 현재의 배치를 돌려줍니다 |
| textBaseline | 텍스트를 그릴 때 설정하거나 반환 현재 텍스트 기준 사용 |
| 방법 | 기술 |
|---|---|
| fillText() | 그립니다 "filled" 캔버스에 텍스트를 |
| strokeText() | 캔버스에 텍스트를 그립니다 (no fill) |
| measureText() | 지정된 텍스트의 폭을 포함하는 객체를 돌려줍니다 |
이미지 그리기
| 방법 | 기술 |
|---|---|
| drawImage() | 캔버스에 이미지, 캔버스, 또는 비디오를 그립니다 |
픽셀 조작
| 재산 | 기술 |
|---|---|
| width | imageData의 객체의 폭을 돌려줍니다 |
| height | imageData의 객체의 높이를 돌려줍니다 |
| data | 지정된 imageData의 객체의 이미지 데이터를 포함하는 객체 반환 |
| 방법 | 기술 |
|---|---|
| createImageData() | 비어있는 새 imageData의 객체를 생성 |
| getImageData() | imageData의 객체를 돌려 캔버스에 복사 지정된 구형의 픽셀 데이터를 |
| putImageData() | 화상 데이터를 둔다 (from a specified ImageData object) 캔버스에 위로 |
합성
| 재산 | 기술 |
|---|---|
| globalAlpha | 설정하거나 도면의 현재의 알파 투명도 값을 반환 |
| globalCompositeOperation | 새 이미지가 기존 이미지에 그려하는 방법을 설정하거나 반환 |
다른
| 방법 | 기술 |
|---|---|
| save() | 현재 컨텍스트의 상태를 저장 |
| restore() | 이전에 저장 한 경로 상태와 속성을 반환 |
| createEvent() | |
| getContext() | |
| toDataURL() |
표준 등록 및 이벤트
관련 페이지
HTML 튜토리얼 : HTML5 캔버스
HTML 참조 : HTML <canvas> 태그