HTML 튜토리얼

HTML 홈 HTML 소개 HTML 편집기 HTML 기본 HTML 요소 HTML 속성 HTML 제목 HTML 단락 HTML 스타일 HTML 서식 HTML 인용문 HTML 주석 HTML 색상 HTML CSS HTML 링크 HTML 이미지 HTML 파비콘 HTML 테이블 HTML 목록 HTML 블록 및 인라인 HTML 클래스 HTML ID HTML 아이프레임 HTML 자바스크립트 HTML 파일 경로 HTML 헤드 HTML 레이아웃 반응형 HTML HTML 컴퓨터 코드 HTML 의미론 HTML 스타일 가이드 HTML 엔티티 HTML 기호 HTML 이모티콘 HTML 문자 집합 HTML URL 인코딩 HTML 대 XHTML

HTML 양식

HTML 양식 HTML 양식 속성 HTML 양식 요소 HTML 입력 유형 HTML 입력 속성 HTML 입력 양식 속성

HTML 그래픽

HTML 캔버스 HTML SVG

HTML 미디어

HTML 미디어 HTML 비디오 HTML 오디오 HTML 플러그인 HTML 유튜브

HTML API

HTML 지리적 위치 HTML 드래그/드롭 HTML 웹 스토리지 HTML 웹 작업자 HTML SSE

HTML 예제

HTML 예제 HTML 퀴즈 HTML 연습 HTML 인증서 HTML 요약 HTML 접근성

HTML 참조

HTML 태그 목록 HTML 속성 HTML 전역 속성 HTML 브라우저 지원 HTML 이벤트 HTML 색상 HTML 캔버스 HTML 오디오/비디오 HTML 문서 유형 HTML 문자 집합 HTML URL 인코딩 HTML 언어 코드 HTTP 메시지 HTTP 메소드 PX에서 EM으로 변환기 키보드 단축키

HTML 캔버스 그래픽


귀하의 브라우저는 <canvas> 요소를 지원하지 않습니다.

HTML <canvas>요소는 웹 페이지에 그래픽을 그리는 데 사용됩니다.

왼쪽의 그래픽은 로 생성됩니다 <canvas>. 빨간색 사각형, 그래디언트 사각형, 다중 색상 사각형 및 다중 색상 텍스트의 네 가지 요소가 표시됩니다.


HTML 캔버스란 무엇입니까?

HTML <canvas>요소는 JavaScript를 통해 즉석에서 그래픽을 그리는 데 사용됩니다.

<canvas>요소는 그래픽의 컨테이너일 뿐입니다 . 실제로 그래픽을 그리려면 JavaScript를 사용해야 합니다.

Canvas에는 경로, 상자, 원, 텍스트를 그리고 이미지를 추가하는 여러 가지 방법이 있습니다.


브라우저 지원

표의 숫자는 <canvas>요소를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

Element
<canvas> 4.0 9.0 2.0 3.1 9.0

캔버스 예

캔버스는 HTML 페이지의 직사각형 영역입니다. 기본적으로 캔버스에는 테두리와 내용이 없습니다.

마크업은 다음과 같습니다.

<canvas id="myCanvas" width="200" height="100"></canvas>

참고: 항상 id속성(스크립트에서 참조됨)을 지정하고 widthheight속성을 지정하여 캔버스 크기를 정의합니다. 테두리를 추가하려면 style속성을 사용하십시오.

다음은 기본 빈 캔버스의 예입니다.

귀하의 브라우저는 캔버스 요소를 지원하지 않습니다.

예시

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>


자바스크립트 추가

사각형의 캔버스 영역을 생성한 후, 드로잉을 하기 위해서는 자바스크립트를 추가해야 합니다.

여기 몇 가지 예가 있어요.

선을 그리다

귀하의 브라우저는 캔버스 요소를 지원하지 않습니다

예시

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>

원 그리기

귀하의 브라우저는 캔버스 요소를 지원하지 않습니다

예시

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>

텍스트 그리기

귀하의 브라우저는 캔버스 요소를 지원하지 않습니다

예시

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>

획 텍스트

귀하의 브라우저는 캔버스 요소를 지원하지 않습니다

예시

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>

선형 그라데이션 그리기

귀하의 브라우저는 캔버스 요소를 지원하지 않습니다

예시

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

원형 그라데이션 그리기

귀하의 브라우저는 캔버스 요소를 지원하지 않습니다

예시

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

이미지 그리기

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>

HTML 캔버스 튜토리얼

에 대한 자세한 내용은 HTML Canvas Tutorial<canvas> 을 참조하십시오 .