목차
- <canvas> 예제 - 그림 그리기
- <canvas> 정의
- <canvas> vs. <svg> 비교
- <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.
시작 태그와 종료 태그로 구성
3.
IE 9 이상 주요 최신 브라우저 모두 지원.
4.
HTML5 추가.
5.
<canvas> 태그는 전역속성과 이벤트속성 지원.
<canvas> vs. <svg> 비교
[<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> 구문
<canvas 속성="속성값"></canvas>
[속성]
id
<canvas> 태그에 그래픽을 그리는 스크립트 ID. (예: hz)
※ HTML5 추가.
width
그래픽의 가로 길이. (예: 숫자px)
※ HTML5 추가.
height
그래픽의 세로 길이. (예: 숫자px)
※ HTML5 추가.
