캔버스 요소

Canvas element
이 기사는 HTML 요소에 관한 것입니다.사용자 인터페이스의 일반 요소는 Canvas(GUI)를 참조합니다.
HTML
비교

캔버스 요소는 HTML5의 일부이며 2D 모양과 비트맵 이미지의 동적이고 스크립트 가능한 렌더링을 가능하게 합니다.비트맵을 업데이트하는 낮은 수준의 절차적 모델입니다.HTML5 Canvas는 또한 2D 게임을 만드는 것을 돕습니다.

HTML5 캔버스는 자체 2D 도면 API를 제공하지만 WebGL API를 지원하여 OpenGL ES로 3D 렌더링이 가능합니다.

역사

캔버스는 2004년 애플이 자체 맥 OS X 웹킷 구성 요소에 사용하기 위해 처음 선보였으며 [1]대시보드 위젯과 사파리 브라우저와 같은 응용 프로그램에 전원을 공급했습니다.이후 2005년 Gecko 브라우저 버전 1.8,[2] 2006년 Opera 버전에서 채택되었으며,[3] 차세대 웹 기술을 위해 제안된 새로운 사양에 대해 웹 하이퍼텍스트 응용 기술 워킹 그룹(WHATWG)에 의해 표준화되었습니다.[citation needed]

사용.

A canvas는 HTML 코드에 정의된 그리기 가능 영역과 높이 및 너비 속성으로 구성됩니다.자바스크립트 코드는 다른 일반적인 2D API와 유사한 완전한 드로잉 기능을 통해 영역에 접근할 수 있으므로 동적으로 생성된 그래픽을 허용합니다.캔버스의 예상되는 용도로는 그래프, 애니메이션, 게임, 이미지 합성 등이 있습니다.

캔버스와 상호 작용하려면 캔버스의 렌더링 컨텍스트를 획득해야 하며, 이를 통해 캔버스 API, WebGL 또는 WebGL2 렌더링 컨텍스트를 사용할지 여부가 결정됩니다.

예

다음 코드는 HTML 페이지에 캔버스 요소를 만듭니다.

<canvas id="example" width="200" height="200"> 이 텍스트는 브라우저에서 HTML5 Canvas를 지원하지 않는 경우 표시됩니다.</canvas>

자바스크립트를 사용하면 캔버스에 그림을 그릴 수 있습니다.

변태의 예 = 문서.요소별 가져오기이드('example'); 변태의 맥락 = 예.getContextContext('2d'); 맥락.fillStyle = '빨간색; 맥락.채움직임(30, 30, 50, 50);

이 코드는 화면에 빨간색 직사각형을 그립니다.

Canvas API는 또한 다음을 제공합니다.save()그리고.restore(), 캔버스 컨텍스트의 모든 속성을 저장하고 복원할 수 있습니다.

캔버스 요소 크기 대 도면 표면 크기

캔버스에는 두 가지 크기가 있습니다: 요소 자체의 크기와 요소의 드로잉 표면의 크기입니다.요소의 너비 및 높이 특성을 설정하면 이러한 크기가 모두 설정됩니다. CSS 특성은 요소의 크기에만 영향을 미치며 도면 표면에는 영향을 주지 않습니다.

기본적으로 캔버스 요소의 크기와 도면 표면의 크기는 모두 300개의 화면 픽셀과 150개의 화면 픽셀입니다.CSS를 사용하여 캔버스 요소의 크기를 설정하는 예제의 목록에서 요소의 크기는 너비 600픽셀, 높이 300픽셀이지만 드로잉 표면의 크기는 기본값 300픽셀 × 150픽셀에서 변경되지 않습니다.캔버스 요소의 크기가 도면 표면의 크기와 일치하지 않으면 브라우저는 요소에 맞게 도면 표면의 크기를 조정합니다(놀랍고 원하지 않는 효과가 발생할 수 있음).

요소 크기 및 도면 표면 크기를 다른 값으로 설정하는 예제:

<!DOCTYPE html> <html> <head> <title> 캔버스 요소 크기 : 600 x 300,캔버스 도면 표면 크기 : 300 x 150 </title> <style> 본문 {배경: #ddddd; canvas} #px { 여백: px; 패딩: 20px; 배경: #fffff; 테두리: 얇은 삽입구 #aaaaaa; 너비: px; 높이: canvas; 높이: canvas> </style> <body> <canvas id="body"> 캔버스 지원 안 됨 </html> </body>

캔버스와 SVG(Scalable Vector Graphics) 비교

SVG는 브라우저에서 도형을 그리는 대안적인 접근법입니다.[4]래스터 기반인 캔버스와 달리 SVG는 벡터 기반이므로 그려진 각 도형은 장면 그래프 또는 문서 객체 모델에서 객체로 기억되고 이후 비트맵으로 렌더링됩니다.즉, SVG 개체의 속성이 변경되면 브라우저가 자동으로 장면을 다시 렌더링할 수 있습니다.

반면 캔버스 객체는 즉시 모드로 그려집니다.위의 캔버스 예에서 직사각형 그리기 작업은 캔버스를 수정하고 직사각형으로 표현된 것은 시스템에 의해 잊혀집니다.사각형의 위치를 변경하려면 사각형에 의해 가려졌을 수도 있는 물체를 포함하여 캔버스를 다시 그려야 합니다.동등한 SVG의 경우, 직사각형의 위치 속성을 간단히 변경할 수 있고 브라우저에서 직사각형을 다시 칠하는 방법을 결정할 수 있습니다.캔버스 요소 내에 svg와 같은 장면 기능을 갖도록 캔버스 모델을 추상화하는 추가 JavaScript 라이브러리가 있습니다.여러 캔버스 레이어를 사용할 수도 있는데, 이는 변경이 필요할 때 특정 레이어만 재생성하면 된다는 것을 의미합니다.

SVG 이미지는 XML로 표현되며 XML 편집 도구를 사용하여 복잡한 장면을 만들고 유지할 수 있습니다.

SVG 장면 그래프는 이벤트 핸들러들이 객체들과 연관될 수 있도록 하여 직사각형이 다음과 같이 응답할 수 있습니다.onClick이벤트. 캔버스와 동일한 기능을 얻으려면 마우스 클릭의 좌표와 그린 직사각형의 좌표를 수동으로 일치시켜 클릭 여부를 판단해야 합니다.

개념적으로 canvas는 상위 레벨 인터페이스(예: SVG 지원)를 구축할 수 있는 하위 레벨 API입니다.SVG를 제공하지 않지만 Android 2.x의 브라우저와 같이 캔버스를 지원하는 브라우저에 대해 캔버스를 사용하여 부분적인 SVG 구현을 제공하는 자바스크립트 라이브러리가 있습니다.그러나 이는 일반적으로 그렇지 않습니다. 이들은 독립적인 표준입니다.캔버스용 장면 그래프 라이브러리가 있고 SVG는 비트맵 조작 기능이 일부 있기 때문에 상황이 복잡합니다.

반응

도입 당시 캔버스 요소는 웹 표준 커뮤니티의 엇갈린 반응을 받았습니다.애플이 SVG 표준을 지원하는 대신 새로운 독점 요소를 만들기로 결정한 것에 반대하는 주장들이 있어 왔습니다.네임스페이스의 부재와 같은 구문에 대한 다른 우려가 있습니다.[5]

캔버스 상의 지적 재산

2007년 3월 14일, 웹킷 개발자인 데이브 하얏트(Dave Hyatt)는 애플의 수석 특허 변호사인 Helene Plotka Workman(헬렌 플로트카 워크맨)이 보낸 이메일을 전달했는데,[6] 이 이메일에는 애플이 2005년 3월 24일자로 작성된 WHATWG의 웹 Applications 1.0 Working Draft(웹 애플리케이션 1.0 작업 초안)에 관련된 모든 지적 재산권을 보유하고 있다고 명시되어 있었습니다. 섹션 10.1은 "그래픽:비트맵 캔버스"[7]라고 명시되어 있지만, 규격이 정식 특허 정책을 가진 표준 단체로 이전될 경우 특허 라이선스를 받을 수 있는 문은 열어두었습니다.이것은 웹 개발자들 사이에 상당한 토론을 야기했고, W3C(World Wide Web Consortium)가 명시적으로 로열티 없는 라이선스를 선호하는 것에 비해 WHATWG의 특허에 대한 정책 부재에 대한 의문을 제기했습니다.애플은 나중에 W3C의 특허 사용권 계약에 따라 특허를 공개했습니다.[8]이번 공개는 HTML 작업 그룹이 만든 향후 W3C 권장 사항에 캔버스 요소가 포함될 때마다 애플이 특허에 대한 로열티 프리 라이센스를 제공해야 한다는 것을 의미합니다.[9]

개인 정보 보호

캔버스 핑거프린팅은 HTML5 캔버스 요소를 사용하여 웹 사이트가 방문자를 식별하고 추적할 수 있도록 하는 온라인 사용자를 추적하기 위한 다양한 브라우저 핑거프린팅 기술 중 하나입니다.이 기술은 Princeton University와 KU Leuven University의 연구원들이 The Web never forgets라는 논문에서 기술한 [10][11][12][13]후 2014년에 광범위한 언론 보도를 받았습니다.[14]캔버스 지문에 대한 개인 정보 보호 문제는 쿠키를 삭제하고 캐시를 지우는 것만으로는 사용자가 온라인 추적을 피할 수 없다는 점에 있습니다.

브라우저 지원

이 요소는 최신 버전의 Mozilla Firefox, Google Chrome, Internet Explorer, Safari, Konqueror, Opera[15] 및 Microsoft Edge에서 지원됩니다.[16]

참고 항목

참고문헌

  1. ^ Ian Hixie (2004-07-12). "Extending HTML". Retrieved 2011-06-13.
  2. ^ Mozilla Developer Connection. "HTMLCanvasElement". Archived from the original on 2011-06-04. Retrieved 2011-06-13.
  3. ^ "Opera 9.0 changelog". Archived from the original on 2012-09-10. Retrieved 2006-06-20.
  4. ^ "Scalable Vector Graphics CorelDRAW". www.coreldraw.com. Retrieved 2022-09-23.
  5. ^ Ian Hickson은 HTML에 대한 캔버스 및 기타 애플 확장에 대해 언급
  6. ^ "[whatwg] Web Applications 1.0 Draft, David Hyatt, Wed Mar 14 14:31:53 PDT 2007". Archived from the original on 2007-05-02. Retrieved 2007-05-01.
  7. ^ 웹 애플리케이션 1.0 조기 작업 초안 - 동적 그래픽: 비트맵 캔버스
  8. ^ HTML 작업 그룹 특허 정책 상태 – 알려진 공시
  9. ^ HTML 작업 그룹에서 사용하는 W3C 특허 정책
  10. ^ Knibbs, Kate (July 21, 2014). "What You Need to Know About the Sneakiest New Online Tracking Tool". Gizmodo. Retrieved July 21, 2014.
  11. ^ Joseph Steinberg (July 23, 2014). "You Are Being Tracked Online By A Sneaky New Technology -- Here's What You Need To Know". Forbes. Retrieved November 15, 2014.
  12. ^ Angwin, Julia (July 21, 2014). "Meet the Online Tracking Device That is Virtually Impossible to Block". ProPublica. Retrieved July 21, 2014.
  13. ^ Kirk, Jeremy (July 21, 2014). "Stealthy Web tracking tools pose increasing privacy risks to users". PC World. Retrieved July 21, 2014.
  14. ^ Acar, Gunes; Eubank, Christian; Englehardt, Steven; Juarez, Marc; Narayanan, Arvind; Diaz, Claudia (July 24, 2014). "The Web never forgets: Persistent tracking mechanisms in the wild". Retrieved July 24, 2014.
  15. ^ Sucan, Mihai (4 Feb 2010). "SVG or Canvas? Сhoosing between the two". Opera Software. Archived from the original on 23 June 2010. Retrieved 3 May 2010.
  16. ^ "Canvas, Microsoft Edge documentation".

외부 링크