• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

목차

  1. <canvas> 예제 - 그림 그리기
  2. <canvas> 정의
  3. <canvas> vs. <svg> 비교
  4. <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 추가.

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro HTML - 준비물 + 추천링크 (※ 사용중지・사용폐기 태그) 2
intro HTML - 태그 문법 ★
basic HTML - <!DOCTYPE> 태그 ★ - 문서타입 (= !doctype태그 = !doctype요소 = …
basic HTML - <html> 태그 ★ - HTML문서 (= html태그/html요소 = 에이치티엠엘태그/에이치티…
basic HTML - <body> 태그 ★ - 문서영역 (= 문서본문영역 = body태그/body요소 = 바디태그/바…
font HTML - <h1> ~ <h6> 태그 ★ - 문단제목글씨크기 (= 표제태그 = 단락제목글자크기 = h1태그…
basic HTML - <p> 태그 ★ - 글단락 (= 글문단 = p태그/p요소 = 피태그/피요소)
basic HTML - <br> 태그 ★ - 줄바꿈 (=br태그/br요소 = 비알태그/비알요소) ※ 한줄아래로 줄바꿈 …
basic HTML - <hr> 태그 - 주제 다른 문단구분선 (= hr태그 = hr요소 = 가로선 = 수평선 = 에이…
basic HTML - <!--주석 내용--> 태그 ★ - 주석 처리 ※ 스크립트 태그 안 주석 의미
intro HTML - IE조건부주석 ★ (= 익스주석태그 = 익스플로러 조건문)
formatting HTML - <acronym> 태그 - 두문자어 (= acronym태그 = acronym요소 = 애크로님태그…
formatting HTML - <abbr> 태그 - 축약어/두문자어 (= abbr태그 = abbr요소 = 어브르태그 = 어브리…
formatting HTML - <address> 태그 - 연락처 (= address태그 = address요소 = 어드레스태그)
font HTML - <b> 태그 ★ - 굵은글씨 (= b태그 = 비태그) ※ 볼드태그 / bold태그 / 글씨 긁…
formatting HTML - <bdo> 태그 - 텍스트출력방향 (= bdo태그 = bdo요소 = 글자방향 = 브도태그 = …
1/18
목록
찾아주셔서 감사합니다. Since 2012