기술
HTML5의 <canvas> 태그는 스크립트 (보통 JavaScript)를 통해 즉석에서, 그래픽을 그리는 데 사용됩니다.
그러나, <canvas> 요소는 (은 그래픽 만 컨테이너입니다) 자신의 더 드로잉 능력이 없다 - 당신은 실제로 그래픽을 그릴 스크립트를 사용해야합니다.
getContext() 메소드는 캔버스에 그리기위한 메서드와 속성을 제공하는 개체를 반환합니다.
이 참조는 속성과 방법 다룰 것 getContext("2d") 캔버스에 - 텍스트, 선, 상자, 원 등을 그리는 데 사용할 수있는 개체를.
브라우저 지원
표의 수치는 전체 요소를지지하는 제 브라우저 버전을 지정.
| 요소 | |||||
|---|---|---|---|---|---|
| <canvas> | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
인터넷 익스플로러 9, 파이어 폭스, 오페라, 크롬, 사파리 지원 <canvas> 과 그것의 속성과 메소드.
참고 : 인터넷 익스플로러 8 이전 버전은 지원하지 않습니다 <canvas> 요소를.
색상, 스타일, 그리고 그림자
| 재산 | 기술 |
|---|---|
| fillStyle | 설정 또는 드로잉을 채우기 위해 사용되는 색상, 그래디언트, 또는 패턴을 반환 |
| strokeStyle | 설정하거나 스트로크에 사용되는 색상, 그라디언트 또는 패턴을 반환 |
| shadowColor | 설정하거나 그림자에 사용하는 색을 반환 |
| shadowBlur | 설정하거나 그림자의 흐림 수준을 반환 |
| shadowOffsetX | 설정하거나 모양에서 그림자의 수평 거리를 반환 |
| shadowOffsetY | 설정하거나 모양에서 그림자의 수직 거리를 반환 |
| 방법 | 기술 |
|---|---|
| createLinearGradient() | 선형 그라데이션 (캔버스 내용에 사용)를 작성합니다 |
| createPattern() | 지정된 방향으로 지정된 요소를 반복 |
| createRadialGradient() | 방사형 / 원형 그라데이션 (캔버스 내용에 사용)를 작성합니다 |
| addColorStop() | 색상을 지정하고 그라데이션 객체의 위치를 중지 |
선 스타일
| 재산 | 기술 |
|---|---|
| lineCap | 설정 또는 라인 엔드 캡의 스타일을 반환 |
| lineJoin | 두 선이 만나는를 설정하거나 만든 코너의 형식을 반환, |
| lineWidth | 설정하거나 현재의 선 폭을 반환 |
| miterLimit | 설정하거나 최대 마이 터 길이를 반환 |
사각형
| 방법 | 기술 |
|---|---|
| rect() | 사각형을 만듭니다 |
| fillRect() | 는 "채워진"사각형을 그립니다 |
| strokeRect() | 사각형 (NO 채우기)을 그립니다 |
| clearRect() | 주어진 사각형 내에서 특정 픽셀을 지 웁니다 |
경로
| 방법 | 기술 |
|---|---|
| fill() | 현재 도면 (경로)를 채 웁니다 |
| stroke() | 실제로 사용자가 정의한 경로를 그립니다 |
| beginPath() | 경로를 시작하거나 전류 경로 재설정 |
| moveTo() | 선을 생성하지 않고, 캔버스에 지정된 점의 경로를 이동 |
| closePath() | 출발점으로 다시 현재 위치로부터 경로를 생성 |
| lineTo() | 새 점을 추가하고 캔버스의 마지막 지정된 점에서 그 점에 선을 만듭니다 |
| clip() | 일본어 캔버스 클립의 임의의 형상 및 크기의 영역을 |
| quadraticCurveTo() | 이차 베 지어 곡선을 작성합니다 |
| bezierCurveTo() | 입방 베 지어 곡선을 작성합니다 |
| arc() | 아크 / 곡선 작성 (동그라미를 만드는 데 사용을, 또는 원의 일부) |
| arcTo() | 두 접선 사이의 아크 / 곡선을 작성합니다 |
| isPointInPath() | 지정된 점이 현재 경로에있는 경우 그렇지 않은 경우는 false, true를 돌려줍니다 |
변환
| 방법 | 기술 |
|---|---|
| scale() | 현재 도면이 크거나 작은 저울 |
| rotate() | 현재 도면을 회전 |
| translate() | 캔버스의 (0,0) 위치를 다시 매핑 |
| transform() | 도면의 현재 변환 행렬을 대체 |
| setTransform() | 현재는 행렬 변환을 재설정합니다. 그런 다음 실행 ) (변환 |
본문
| 재산 | 기술 |
|---|---|
| font | 설정하거나 텍스트 콘텐츠의 현재 글꼴 속성을 반환 |
| textAlign | 설정하거나 텍스트 콘텐츠에 대한 현재의 배치를 돌려줍니다 |
| textBaseline | 텍스트를 그릴 때 설정하거나 반환 현재 텍스트 기준 사용 |
| 방법 | 기술 |
|---|---|
| fillText() | 캔버스에 "충전"텍스트를 그립니다 |
| strokeText() | 캔버스 (아무 채우기)에 텍스트를 그립니다 |
| measureText() | 지정된 텍스트의 폭을 포함하는 객체를 돌려줍니다 |
이미지 그리기
| 방법 | 기술 |
|---|---|
| drawImage() | 캔버스에 이미지, 캔버스, 또는 동영상을 그립니다 |
픽셀 조작
| 재산 | 기술 |
|---|---|
| width | imageData의 객체의 폭을 돌려줍니다 |
| height | imageData의 객체의 높이를 돌려줍니다 |
| data | imageData의 특정 물체의 이미지 데이터를 포함하는 객체를 리턴 |
| 방법 | 기술 |
|---|---|
| createImageData() | 비어있는 새 imageData의 객체를 생성 |
| getImageData() | imageData의 객체를 돌려 캔버스에 복사 지정된 구형의 픽셀 데이터를 |
| putImageData() | 캔버스에 다시 (imageData의 지정된 객체로부터) 이미지 데이터를 넣 |
합성
| 재산 | 기술 |
|---|---|
| globalAlpha | 설정하거나 도면의 현재 알파 또는 투명성 값을 반환 |
| globalCompositeOperation | 새 이미지가 기존 이미지에 그려진하는 방법을 설정하거나 반환 |
다른
| 방법 | 기술 |
|---|---|
| save() | 현재 컨텍스트의 상태를 저장 |
| restore() | 이전에 저장 한 경로 상태와 속성을 돌려줍니다 |
| createEvent() | |
| getContext() | |
| toDataURL() |