HTML <canvas> 태그

정의와 사용법

<canvas> 레이블은 일반적으로 스크립트(대부분 JavaScript)를 통해 실시간으로 그래픽을 그립니다.

<canvas> 레이블은 투명합니다. 그것은 단순히 그래픽의 컨테이너일 뿐, 그래픽을 실제로 그려야 할 때는 스크립트를 사용해야 합니다.

JavaScript를 비활성화한 브라우저와 지원하지 않는 <canvas> 의 브라우저에서는 다음과 같이 표시됩니다 <canvas> 요소 내의 모든 텍스트.

힌트

HTML Canvas 교육에서 관련 내용을 배우세요 <canvas> 요소에 대한 더 많은 지식을 방문해 주세요.

모든 속성과 메서드의 완전한 참조를 확인하려면, 우리의 HTML Canvas 참조 매뉴얼.

인스턴스

예제 1

실시간으로 빨간 사각형을 그려 <canvas> 요소에 표시합니다:

<canvas id="myCanvas">
您的浏览器不支持 canvas 标签。
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

직접 테스트해 보세요

예제 2

또 다른 <canvas> 예제:

<canvas id="myCanvas">
您的浏览器不支持 canvas 标签。
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 75, 50);
// 투명도를 열기
ctx.globalAlpha = 0.2;
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 75, 50);
ctx.fillStyle = "green";
ctx.fillRect(80, 80, 75, 50);
</script>

직접 테스트해 보세요

속성

속성 값 설명
height 픽셀 값 캔버스의 높이를 정의합니다. 기본 값은 150입니다.
width 픽셀 값 캔버스의 너비를 정의합니다. 기본 값은 300입니다.

전역 속성

<canvas> 라벨은 다음과 같은 이벤트 속성을 지원합니다 HTML에서의 전역 속성.

이벤트 속성

<canvas> 라벨은 다음과 같은 이벤트 속성을 지원합니다 HTML에서의 이벤트 속성.

기본 CSS 설정

대부분의 브라우저는 다음과 같은 기본 값으로 표시합니다 <canvas> 요소:

canvas {
  height: 150px;
  width: 300px;
}

직접 테스트해 보세요

<canvas>의 역사

이 HTML 요소는 클라이언트 벡터 그래픽을 위해 설계되었습니다. 그것 자체는 행동이 없지만, 클라이언트 자바스크립트에 그래픽 API를 제공하여 스크립트가 그리고 싶은 것을 모두 그릴 수 있는 캔버스를 제공합니다.

<canvas> 태그는 Apple이 Safari 1.3 웹 브라우저에서 도입했습니다. Safari에서의 HTML의 그리기 기능이 Mac OS X 데스크톱의 Dashboard 컴포넌트에 사용되고 있으며, Apple은 Dashboard에서 스크립트화된 그래픽을 지원하는 방법이 필요하다고 생각했습니다.

Firefox 1.5과 Opera 9는 Safari를 따라갔습니다. 이 두 브라우저는 모두 <canvas> 태그를 지원합니다.

우리는 IE에서 <canvas> 태그를 사용하고, IE의 VML 지원을 기반으로 오픈 소스 JavaScript 코드(구글이 주도)를 사용하여 호환성 캔버스를 구축할 수 있습니다. 참조:http://excanvas.sourceforge.net/.

<canvas>의 표준화는 비공식적인 웹 브라우저 제조업체 협회에서 추진되고 있으며, 현재 <canvas>는 HTML 5 초안에서 공식 태그로 되어 있습니다. 참조:http://www.whatwg.org/specs/web-apps/current-work/

<canvas> 태그와 SVG 및 VML 간의 차이점

<canvas> 태그와 SVG 및 VML 간의 중요한 차이점은, <canvas>가 JavaScript 기반의 그리기 API를 갖추고 있으며, SVG 및 VML은 그리기를 설명하는 XML 문서를 사용한다는 점입니다.

이 두 가지 방법은 기능적으로 동일합니다. 어떤 방법이든 다른 방법으로 모의할 수 있습니다. 표면적으로는 매우 다르지만, 각각의 장점과 단점이 있습니다. 예를 들어, SVG 그리기는 요소를 제거하는 것만으로도 쉽게 편집할 수 있습니다.

동일한 그래픽의 <canvas> 태그에서 요소를 제거하려면, 그리기를 지우고 다시 그리는 것이 일반적입니다.

<canvas> 태그를 사용하여 그리는 방법

대부분의 Canvas 그리기 API는 <canvas> 요소 자체에 정의되어 있지 않고, 그 대신 경로를 통해 정의됩니다. getContext() 메서드획득된 '그리기 환경' 객체에 있습니다.

Canvas API는 경로 표현법을 사용합니다. 그러나 경로는 문자와 숫자의 문자열로 설명되는 대신, beginPath()와 arc()와 같은 메서드 호출로 정의됩니다.

경로가 정의되면, fill()와 같은 다른 메서드는 이 경로에 대한 작업을 수행합니다. 그리기 환경의 다양한 속성, 예를 들어 fillStyle는 이 작업이 어떻게 사용되는지 설명합니다.

주의:Canvas API는 그가 그리기에 대한 지원을 제공하지 않는 매우 조밀한 이유로 매우 조밀합니다. <canvas> 그래픽에 텍스트를 추가하려면, 자신이 그리고 비트맵 이미지와 결합하거나, <canvas> 위에 CSS 정렬을 사용하여 HTML 텍스트를 덮어야 합니다.

브라우저 지원

표의 숫자는 이 요소를 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
4.0 9.0 2.0 3.1 9.0