[image] HTML - <canvas> 태그 - 그림그리기 (= canvas태그 = 캔버스태그)

<canvas id="homzzang"></canvas>

<script>

var canvas = document.getElementById("homzzang");

var img = canvas.getContext("2d");

img.fillStyle = "#FF0000"; // 그래픽 이미지 색

img.fillRect(0, 0, 100, 100); // 왼쪽상단모서리좌표, 오른쪽하단모서리좌표

</script>

결과보기

[<canvas> 태그]

1.

2차원 그래픽 표현 위한 HTML 언어

2.

HTML5에서 새로 도입

3.

픽셀 단위로 렌더링 되며, 

한번 이미지가 그려지면, 브라우저는 잊어 버림.

그 결과, 위치가 바뀔 경우 다시 그려야 함.

[svg와 구별되는 canvas만의 특징]

1.

해상도에 영향 받음

2. 

이벤트 핸들러 지원 안 함.

3.

텍스트 출력 지원 안 함. (오직 그래픽만 지원)

4.

이미지를 png나 jpg 형식으로 저장 가능.

5.

그래픽 기반의 게임에 적합.

 

---

[<svg> 태그]

1.

2차원 그래픽 표현 위한 XML 기반 언어.

2.

HTML5에서 새로 도입.

3.

그려진 이미지는 객체로 인식되며,

객체 속성이 변하면 자동 반영 됨.

그 결과, 위치나 모양 변화면 자동 반영됨.

[cavas와 구별되는 svg만의 특징]

1.

해상도에 영향 안 받음

2.

이벤트 핸들러 지원 함.

3.

큰 렌더링 갖은 애플리케이션에 최적화

4.

복잡하면 렌더링이 늦을 수 있음.

5.

게임 애플리케이션에 부적합

 

<canvas> 구문