English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML 캔버스가 제공하는 기능은 더 원시적이며, 픽셀 처리, 동적 렌더링 및 대량 그리기에 적합합니다.
HTML5 <canvas> 태그는 스크립트(대체로 JavaScript)를 통해 동적으로 그래픽을 그리기 위해 사용됩니다.
하지만, <canvas> 요소는 자신의 그리기 기능을 가지고 있지 않습니다(그것은 단지 그래픽의 컨테이너일 뿐)-그래픽을 실제로 그리기 위해 스크립트를 사용해야 합니다.
getContext() 메서드는 캔버스에 그리는 방법과 속성을 제공하는 객체를 반환합니다.
getContext("2d") 객체의 속성 및 메서드를 소개하며, 이러한 속성 및 메서드는 캔버스에 텍스트, 선, 사각형, 원 등을 그리는 데 사용될 수 있습니다.
IEFirefoxOperaChromeSafari
Internet Explorer 9Firefox, Opera, Chrome 및 Safari는 <canvas> 태그의 속성 및 메서드를 지원합니다.
주의:Internet Explorer 8 및 이전의 IE 버전은 <canvas> 요소를 지원하지 않습니다.
| 속성 | 설명 |
| fillStyle | 채우기에 사용되는 색상, 변화 또는 패턴을 설정하거나 반환합니다. |
| strokeStyle | 스톰 라인에 사용되는 색상, 변화 또는 패턴을 설정하거나 반환합니다. |
| shadowColor | 그림자에 사용되는 색상을 설정하거나 반환합니다. |
| shadowBlur | 그림자에 사용되는 흐림 수준을 설정하거나 반환합니다. |
| shadowOffsetX | 그림자와 형태의 수평 거리를 설정하거나 반환합니다. |
| shadowOffsetY | 그림자와 형태의 수직 거리를 설정하거나 반환합니다. |
| 메서드 | 설명 |
| createLinearGradient() | 선형 변화 생성(캔버스 내용에 사용됨). |
| createPattern() | 지정된 방향에서 지정된 요소를 반복합니다. |
| createRadialGradient() | 방사형 생성/원형의 변화(캔버스 내용에 사용됨). |
| addColorStop() | 퍼터빈 객체 내에서 색상과 정지 위치를 지정합니다. |
| 속성 | 설명 |
| lineCap | 선의 끝 부분 스타일을 설정하거나 반환합니다. |
| lineJoin | 두 선이 교차할 때, 생성된 모서리 유형을 설정하거나 반환합니다. |
| lineWidth | 현재 선 너비를 설정하거나 반환합니다. |
| miterLimit | 최대 기울기 길이를 설정하거나 반환합니다. |
| 메서드 | 설명 |
| rect() | 사각형을 생성합니다. |
| fillRect() | 채운 사각형을 그립니다. |
| strokeRect() | 채우지 않는 사각형을 그립니다. |
| clearRect() | 지정된 사각형 내에서 특정 픽셀을 지우습니다. |
| 메서드 | 설명 |
| fill() | 현재 그리기를 채웁니다. |
| stroke() | 정의된 경로를 그립니다. |
| beginPath() | 경로를 시작하거나 현재 경로를 초기화합니다. |
| moveTo() | 경로를 캔버스의 지정된 점으로 이동시키고 선을 그리지 않습니다. |
| closePath() | 현재 점에서 시작점으로 돌아가는 경로를 생성합니다. |
| lineTo() | 새 점을 추가한 다음, 캔버스에서 이 점에서 마지막으로 지정된 점까지의 선을 그립니다. |
| clip() | 원래 캔버스에서 어떤 형상과 크기의 영역을 잘라냅니다. |
| quadraticCurveTo() | 이차 베塞尔 곡선을 생성합니다. |
| bezierCurveTo() | 삼차 베塞尔 곡선을 생성합니다. |
| arc() | 반원을 생성합니다./곡선(원형이나 원형 부분을 생성하는 데 사용) |
| arcTo() | 두 툰선 간의 반원을 생성합니다./곡선 |
| isPointInPath() | 지정된 점이 현재 경로에 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다. |
| 메서드 | 설명 |
| scale() | 현재 그리기를 더 크거나 더 작게 확대합니다. |
| rotate() | 현재 그리기를 회전합니다. |
| translate() | 캔버스상의 (0,0) 위치를 다시 매핑합니다. |
| transform() | 그리는 현재 변환 행렬을 대체합니다. |
| setTransform() | 현재 변환을 원단위 행렬로 초기화한 다음 transform()를 실행합니다. |
| 속성 | 설명 |
| font | 텍스트 내용의 현재 폰트 속성을 설정하거나 반환합니다. |
| textAlign | 텍스트 내용의 현재 정렬 방식을 설정하거나 반환합니다. |
| textBaseline | 그리는 텍스트에 사용하는 현재 텍스트 기준선을 설정하거나 반환합니다. |
| 메서드 | 설명 |
| fillText() | 캔버스에 "채운" 텍스트를 그립니다. |
| strokeText() | 캔버스에 텍스트를 그립니다. (채우지 않음) |
| measureText() | 지정된 텍스트 너비를 포함한 객체를 반환합니다. |
| 메서드 | 설명 |
| drawImage() | 화면에 이미지, 캔버스 또는 비디오를 그립니다. |
| 속성 | 설명 |
| width | ImageData 객체의 너비를 반환합니다. |
| height | ImageData 객체의 높이를 반환합니다. |
| data | 지정된 ImageData 객체의 이미지 데이터를 포함하는 객체를 반환합니다. |
| 메서드 | 설명 |
| createImageData() | 새로운, 비어 있는 ImageData 객체를 생성합니다. |
| getImageData() | 캔버스에 지정된 다각형의 픽셀 데이터를 복사하는 ImageData 객체를 반환합니다. |
| putImageData() | 이미지 데이터(지정된 ImageData 객체에서)를 캔버스에 다시 배치합니다. |
| 속성 | 설명 |
| globalAlpha | 그리는 현재 alpha(투명도) 값을 설정하거나 반환합니다. |
| globalCompositeOperation | 기존 이미지에 새로운 이미지를 그리는 방법을 설정하거나 반환합니다. |
| 메서드 | 설명 |
| save() | 현재 환경의 상태를 저장합니다. |
| restore() | 이전에 저장된 경로 상태와 속성을 반환합니다. |
| createEvent() | |
| getContext() | |
| toDataURL() |