<canvas>는 스크립트(보통 js)를 사용하여 그릴 수 있는 HTML 요소입니다.
< 캔버스 > WebKit은 Apple에서 처음 도입하여 Mac OS X의 Dashboard와 Safari에서 사용되었습니다.
현재 모든 주요 브라우저에서 이를 지원합니다(IE9+, 하위 버전에서는 지원하려면 Explorer Canvas를 도입해야 함).
1. 그리기 시작(렌더링 컨텍스트)<canvas> 요소는 렌더링 컨텍스트 CanvasRenderContext2D를 사용하여 표시할 콘텐츠를 그리고 처리할 수 있는 고정 크기 캔버스를 만듭니다.
캔버스에 그리려면 먼저 CanvasRenderContext2D2d 렌더링 컨텍스트를 얻어야 합니다. (이것은 2D를 의미하며 webgl을 말하는 것이 아닙니다.)
const canvas = document.getElementById('mycanvas'); const ctx = canvas.getContext('2d');ctx.fillStyle = 'pink';ctx.fillRect(10, 10, 300, 300);예
2. CanvasRenderContext2D의 속성:컨텍스트의 속성을 설정하여 도면 스타일을 지정할 수 있습니다.
모든 속성은 다음과 같습니다.
| 재산 | 소개 |
|---|---|
| 캔버스 | 캔버스 요소 |
| 채우기 스타일 | 패스를 채우는 데 사용되는 현재 색상, 모드 또는 그라데이션 |
| 세례반 | 글꼴 스타일 |
| 글로벌알파 | 캔버스에 그려진 내용의 불투명도를 지정합니다 |
| globalCompositeOperation | 캔버스에 이미 있는 색상과 색상을 결합하는 방법 지정(합성) |
| 라인캡 | 선의 끝을 그리는 방법을 지정합니다. |
| lineDashOffset | 대시 오프셋 설정 |
| lineJoin | 두 선을 연결하는 방법 지정 |
| 선폭 | 브러시(선 그리기) 작업의 선 너비를 지정합니다. |
| 마이터한계 | lineJoin 속성이 마이터인 경우 이 속성은 선 너비에 대한 대각선 결합 길이의 최대 비율을 지정합니다. |
| 그림자 흐림 | 흐림 효과 수준 |
| 그림자색상 | 그림자 색상 |
| 그림자오프셋X | 그림자 수평 오프셋 거리 |
| 그림자오프셋Y | 그림자 수직 오프셋 거리 |
| 스트로크스타일 | 브러시(그리기) 경로의 색상, 모드 및 그라데이션 |
| 텍스트정렬 | 텍스트 정렬 |
| 텍스트 기준선 | 텍스트 수직 정렬 |
Canvas의 너비와 높이는 width 및 height 속성 값을 사용하여 지정해야 합니다.
지정하지 않으면 캔버스의 기본 크기는 300×150입니다.
스타일에 지정된 너비와 높이는 캔버스 요소의 표시 크기일 뿐이며 그리기 환경의 크기는 아닙니다.
캔버스 {너비: 1000px;높이: 600px;}<canvas id=mycanvas width=1000 height=600></canvas><canvas id=mycanvas1 width=500 height=300></canvas><canvas id=mycanvas2>< /canvas>...ctx.fillStyle = 빨간색;ctx.fillRect(10, 10, 100, 100); 폭과 높이의 예스타일이 동일한 크기로 설정되어 있지만 완전히 다르게 표시되는 이유는 무엇입니까?
위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.