본문으로 이동

캔버스 요소

위키백과, 우리 모두의 백과사전.

캔버스 요소(canvas element)는 HTML5의 일부로서 2차원 모양과 비트맵 그림의 스크립트 작성이 가능한 동적 렌더링을 허용한다. 비트맵을 업데이트하는 낮은 수준의 절차적 모델이며 씬 그래프가 내장되어 있지 않다.

역사

[편집]

캔버스는 애플이 자사의 macOS 웹킷 구성 요소 안에 사용할 목적으로 2004년에 처음 도입하였으며,[1] 대시보드 위젯과 사파리 브라우저와 같은 응용 프로그램들의 기능을 강화하는데 사용되었다. 나중에 2005년에 버전 1.8의 게코 브라우저에 채택되었으며,[2] 오페라에는 2006년 채택되었고,[3] 차세대 웹 기술의 신규 제안 사양으로 WHATWG에 의해 표준화되었다.

[편집]

다음의 코드는 캔버스 요소를 HTML 문서에서 만든다:

<canvas id="example" width="200" height="200">
브라우저가 HTML5 캔버스를 지원하지 않으면 이 문구가 표시됩니다.
</canvas>

자바스크립트를 사용하여 캔버스를 그릴 수 있다:

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);

이 코드는 화면에 빨간 사각형을 그린다.

캔버스 API는 캔버스 컨텍스트의 모든 속성을 저장하고 복원하기 위해 save()restore()도 제공한다.

브라우저 지원

[편집]

현재 버전의 모질라 파이어폭스, 구글 크롬, 인터넷 익스플로러, 사파리, 캉커러, 오페라[4], 마이크로소프트 에지에 의해 지원된다.[5]

같이 보기

[편집]

각주

[편집]
  1. Ian Hixie (2004년 7월 12일). “Extending HTML”. 2011년 6월 13일에 확인함. 
  2. Mozilla Developer Connection. “HTMLCanvasElement”. 2011년 6월 4일에 원본 문서에서 보존된 문서. 2011년 6월 13일에 확인함. 
  3. “Opera 9.0 changelog”. 2012년 9월 10일에 원본 문서에서 보존된 문서. 2018년 2월 22일에 확인함. 
  4. Sucan, Mihai (2010년 2월 4일). “SVG or Canvas? Сhoosing between the two”. Opera Software. 2010년 6월 23일에 원본 문서에서 보존된 문서. 2010년 5월 3일에 확인함. 
  5. “Canvas, Microsoft Edge documentation”. 

외부 링크

[편집]