canvas vs svg

canvas 

: html 5의 최신 그래픽 기술

: html 태그 놀이는 아주 기본적인것.

: 웹 앱을 만들기 위한 기술 

: js 를 제대로 쓸줄 알아야, html5 를 쓸수 있다고 말할수 있다.

svg 

: html5 이전의 그래픽 기술 (scaleable vector graphic)

* 기본적으로 알아두어야 할것

스칼라 : 양--> 속력, 몸무게

vector : 양(가변) + 방향(fix)  : 속도  : 양만 정해지면 확대, 축소가능 - 곧 ai는 확대해도 안깨진다.

canvas vs svg  

canvas	svg
: vector와 반대.    : 그림마다 칸칸이 점을 찍는것이라고 생각하면 됌.   : 사용하기 위해선 canvas 태그가 필요   : 점으로 그림을 그리는 것	: tag로 기술이 됨. <원><직선><사각형>--> 하나하나 문서객체의 element들/ 태그에 style을 넣어 크기,위치,속성 지정가능    : html과 똑같은 레벨 단지 그래픽을 기술한다는 점.   : DOM (document object model) 문서객체 이다.     예: rect   - style 태그로 크기, 선, 색 지정가능   - onclick event 같은 javascript 효과도 줄수 있음.
: 겹쳐진 부분은 없어지는 것임   : 가벼움   : 로딩이 빨리 됨   : js로 그리는 것임   : 지우고,그리고, 지우고, 반복   : cpu 성능을 크게 잡아먹지 않음   : 게임제작시 좋음   : 점마다 다 파악가능   : svg가 못하는것을 할수있다.   : 이미지를 불러와서 그걸 또 다시 복사하고 그리고 반     복작업도 할수있따.[미선png 링크]   : 한 px 마다 접근 가능 (grascale, 반전, rgba 분석후     새조절 가능, crop등등...)   : background로도 설정해줄수도 있다.   : png.jpg등으로 가져올수가 있다.	: 겹쳐진 부분은 지워지지 않아   : 하나의 사각형 위에 그위에 또 올라가 있는것임   : 사각형 위에 사각형     : 태그로 기술되기 때문에 dom을 추가하기 때문에 무거워짐    예: 교과목 이수체계도 [바로가기링크]

와우!!~ 놀라워라!!~

* 라이브러리가 존재하네?!!

참고 url : http://paperjs.org/

http://tech.kayac.com/ 얘는 배경이 canvas로 랜덤으로 돌아가는 것임. --> 가볍고 빠르겠지?

* conclusion : 기획할때, 쓰는 목적에 따라 canvas로 할건지, svg로 할건지 정해야 한다. 

궁금한점

* 그러면 canvas와 flash중 어느게 더 빨라요??

canvas	flash
js 브라우저에서 해석 후 그려냄  차트, 이미지 변환시에 좋아.	swf 변환 완료후 인클루도 (cpu에서 바로실행) 더 빠름

그분이 만드신 canvas 예제들
http://sexybone.tistory.com/209