캔버스는 무엇을 의미합니까?

캔버스는 무슨 뜻인가요?

Canvas는 영어로 "캔버스"를 의미하지만, 여기서 언급된 Canvas는 개발자가 일련의 그래픽을 그릴 수 있는 HTML5의 새로운 요소입니다. Canvas가 HTML 파일에 작성되는 방식은 매우 간단합니다.

<canvas id="canvas" width="宽度" height="高度"></canvas>

id 속성은 모든 HTML 요소에서 사용할 수 있습니다. Canvas와 함께 제공되는 유일한 속성은 마지막 두 속성(너비와 높이를 각각 제어)뿐입니다. 호환성에 대해 CanIUse에서는 현재 사용자가 사용하는 브라우저의 90%가 기본 기능을 지원하므로 대부분의 경우 안심하고 사용할 수 있다고 명시하고 있습니다.

참고로 Canvas와 함께 제공되는 너비 및 높이 속성을 사용해야 하며 CSS를 사용하여 제어하지 마세요. CSS 제어로 인해 Canvas가 변형될 수 있기 때문입니다. PhptpShop과 비교해 볼 수 있습니다. 후자는 "이미지 크기"를 변경하는 반면 전자는 "캔버스 크기"를 변경하는 올바른 방법입니다. 예를 들어, 아래 사진은 세 장의 사진을 가로로 이어붙인 것입니다. 맨 왼쪽의 검은색 상자는 50px * 50px 크기의 원본 사진이고, 가운데는 이미지 크기를 100px * 100px로 변경한 효과입니다. 흐려지지만 이미지 자체에 대해서는 좌표 범위가 더 커지지 않았다고 합니다. 가장 오른쪽이 올바른 100px * 100px Canvas입니다.

Canvas 대부분의 그리기 방법은 태그와 관련이 없으며 소위 Canvas API를 사용하여 작동해야 합니다.

먼저 이 요소를 얻습니다:

var canvas = document.getElementById('canvas');

그런 다음 메소드를 사용하여 모든 캔버스 API를 호출할 수 있는 입구를 얻습니다:

var ctx = canvas.getContext('2d');

2D를 보면 3D가 생각나고 신나나요? 3D 글쓰기 방법은 없지만 3D 세계로의 문을 열고 싶다면 canvas.getContext('webgl')를 쓰면 됩니다. 하지만 WebGL은 OpenGL ES 2.0을 기반으로 한 표준 집합으로, 본 글과는 전혀 다르기 때문에 여기서는 다루지 않겠습니다.

위 내용은 캔버스는 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!