웹표준/2D,3D Graphics and Effects(그래픽효과) (5) 썸네일형 리스트형 4. SVG (Scalable Vector Graphics) SVG란? SVG는 수학적 기반으로하는 벡터 방식의 웹이미지를 표현하는 XML형식의 마크업 언어이다. PNG가 pixel단위로 구성되는 래스터이미지인 반면 SVG는 점, 직선, 곡선과 같은 형태로 구성되는 벡터이미지이다. SVG의 장점 1 HTML, CSS, JavaScript와 함께 동작할 수 있다. 이는 이미지를 에디터에서 직접 수정 및 확인 할 수 있다는 뜻이다. SVG의 장점2 벡터이미지 기반이다보니 깨지지 않는다. Hover 이미지에 사용하면 깨지지않는 이펙트로 사용가능. (주로 아이콘) SVG의 단점1 IE8 이하에서 지원되지 않는다. SVG의 단점2 사용하는데 수학적 계산을 요구하며, 상황에 따라 지나치게 복잡해지거나 크기가 커질 수 있다. 따라서 SVG 는 로고 또는 아이콘같은 단순화된 이.. 3. WebG WebGL은 플러그인 없이 모든 웹 브라우저에서 대화식 2D/3D 그래픽을 랜더링하기위한 Javascript API. 요소에 사용할 수 있는 OpenGL ES 2.0을 준수하는 API를 도입하여 사용함. 벡터 데이터를 비트맵으로 바꾸는 래스터화 엔진이며 컴퓨터의 GPU에서 운영된다. GPU의 실행 명령을 수행하기위해 버텍스 셰이더, 프래그먼트 셰이더라는 함수들이 제공된다 FireFox Chrome Opera Safari IE Edge 4 이상 9 이상 12 이상 5.1 이상 11 이상 빌드10240 이상 - 버텍스 셰이더(Vertex shader) 각 정점의 위치를 계산하여 작성된 함수가 최종적으로 반환되는 정점을 기준으로 다양한 도형을 래스터화 할 수 있다. 래스터화 후 프래그먼트 셰이더 함수가 호출된.. 2. <canvas> Text API 텍스트 컨텍스트 - fillText (text, x, y, maxWidth) -> 주어진 x, y위치에 텍스트를 채움 - strokeText (text, x, y, maxWidth) -> 주어진 위치에 외곽선 텍스트를 생성 - font = value (10px sans-serif) - textAlign = start / end / left / right / center - textBaseline = top / bottom / hanging / middle / alphabetic / ideographic - direction = ltr / rtl / inherit 텍스트 측정 - measureText() -> 해당 텍스트의 너비, 픽셀 등 정보를 포함하는 객체를 리턴. 1_2. <canvas> 스타일 색칠 - fillstyle = "#d8d8d8"; -> 도형의 내부를 칠함 - strokeStyle = "rgba(50,50,50, 0.5)"; -> 도형의 외곽선을 칠함 투명도 - globalAlpha = 0.2 -> 이후에 그려질 도형들에 대한 투명값 - rgba() -> 조금 더 제어가 쉽고 융통성 있는 투명값 선 두께 선 모양 -lineWidth = 양수 - lineCap = butt / round / square - lineJoin = round / bevel / miter (라인을 닫는 모서리부분의 굴곡을 참고)) - miterLimit ..? - getLineDash -> SetLineDash와 lineDashOffset로 정해진 대시패턴에 따라 대시라인을 사용 - SetLineDash ->.. 1_1. <canvas> 기본도형 는 javascript를 사용하여 그림(그래프. 사진합성, 애니메이션)을 그리는 html요소이다. 기본적으로 width : 300px / height : 150px 로 지정되어있고 와 같이 초기 해상도를 고려하여 사이즈를 지정해야한다. 대체 콘텐츠 대체 컨텐츠를 제공하는 방법은 태그 안에 대체 컨텐츠를 삽입하는것이다. 를 지원하지 않는 브라우저에서는 대체 컨텐츠를 렌더링한다. 기본 사용법 - draw() 함수 -> 문서가 load이벤트를 수신하여 페이지를 로딩할때 실행 - if(canvas.getContext) -> getContext() 메소드의 존재여부를 테스트하여 를 지원하는 브라우저인지 검사. - var ctx = canvas.getContext('2d'); -> getContext() 메서드의 .. 이전 1 다음
