EverGiver

Path란 element는 SVG 기본 도형 라이브러리에서 가장 강력한 엘리먼트이다. 선과 곡선, 호 등 다양한 형태를 그릴 수 있다. 패스의 모양은 d 속성 하나로 정의된다. ("d" 속성은 여러 개의 명령어와 그 파라미터들로 이루어진다.) 각각 명령은 특정 알파벳으로 시작한다. - "Move To" 명령을 사용하며, 이 명령은 알파벳 M으로 호출 (SVG 처리기가 이 문자를 읽게 되면 다른 위치로 이동하라는 명령으로 이해하게 된다.) 모든 명령어는 2가지 변형이 존재하는데, 알파벳이 대문자일 경우, 뒤따르는 좌표는 페이지의 절대 좌표를 참조하며, 소문자 알파벳일 경우 마지막 위치에 대한 상대적 좌표로 참조된다. Line(선) 명령어 두 점 사이에 선을 그리는 역할을 한다. M / m (moveTo) ..

line (선) x1 속성은 x-axis에서 라인의 시작을 정의 y1 속성은 y-axis에서 라인의 시작을 정의 x2 속성은 x-axis에서 라인의 끝을 정의 y2 속성은 y-axis에서 라인의 끝을 정의 line ​ 속성 - stroke-dasharray : 줄 사이 간격 ​ Rectangle (사각형) x는 사각형의 좌측 상단의 x 값을 의미 y는 사각형의 좌측 상단의 y 값을 의미 width는 사각형의 폭을 의미 height는 사각형의 높이를 의미 rx는 사각형의 둥근 꼭짓점의 x 방향으로의 반지름 ry는 사각형의 둥근 꼭짓점의 y 방향으로의 반지름 Circle (원) r은 원의 반지름을 의미 cx는 원의 중심 중 x 값을 의미 cy는 원의 중심 중 y 값을 의미 ​ Ellipse (타원) cx는 ..

SVG란 SVG는 Scalable Vector Graphics의 약어이며, 확장 가능한 벡터 그래픽이다. 2차원 그래픽 애플리케이션과 이미지, 관련 그래픽 스크립트 인터페이스 집합을 기술하기 위한 마크업 언어이다. 픽셀을 이용하여 그림을 그리는 png, jpg 파일들과 다르게 벡터를 기반으로 이미지를 표현한다. - 크기를 조절함에 따라 깨지는 것이 없고, 용량이 작기 때문에 웹에서 자주 사용하는 이미지 형식이다. SVG 이미지는 마크업으로 쓰이므로 텍스트 에디터로 작성하고 또 작성된 이미지를 수정할 수도 있다. 벡터를 기반으로 그려지므로 사이지를 크게 해도 깨지지 않는다. XML 포맷으로 파일이 작성되므로 JS나 CSS로 조작이 가능하다. [장점] - 애니메이션을 적용할 수 있다. - 편집 가능한 레이어..

Canvas Basic Animation Canvas 기본 애니메이션 단계 1. 캔버스를 비운다. 2. 캔버스 상태를 저장한다. 3. 애니메이션 할 도형을 드로잉 한다. 4. 캔버스 상태를 복원한다. requestAnimationFrame() - 브라우저에게 수행하기를 원하는 애니메이션을 알리고 해당 애니메이션을 업데이트하는 자바스크립트 함수 - 시간 값을 인자로 받을 수 있고, 모니터 주사율에 맞춰서 애니메이션을 실행해주기 때문에 최근 애니메이션에 가장 많이 사용하는 함수이다. - setTimeout : 일정 시간이 지나면 해당 함수를 실행, 재귀 호출을 사용해서 반복 - setInterval : 일정 시간마다 해당 함수를 실행 - requestAnimation : 브라우저에게 애니메이션을 실행하도록 ..

Canvas Images drawImage(img,x,y) - 원본 이미지의 원래 크기대로 캔버스의 지정된 위치에 삽입하는 메소드 - 이미지, 다른 캔버스, 동영상을 삽입할 수 있다. - 이미지를 삽입하기 전에 해당 이미지가 로딩되어야 이미지를 삽입할 수 있다. const canvas43 = document.getElementById('canvas43'); const ctx43 = canvas43.getContext('2d'); const img1 = document.getElementById('smile1'); ctx43.drawImage(img1,50,50); const canvas44 = document.getElementById('canvas44'); const ctx44 = canvas44.ge..

Canvas Text fillText(text,x,y) - 색상이 채워져 있는 텍스트를 작성하는 메소드 - x와 y는 텍스트의 x와 y 좌표이고 fillStyle 속성으로 기본 값은 #000000 이다. font - 글자의 속성을 지정하는 속성 - 기본 값은 10px sans-serif이고 사용 방법은 css의 font 속성과 거의 동일하다. const canvas37 = document.getElementById('canvas37'); const ctx37 = canvas37.getContext('2d'); ctx37.font = 'bold 7em Arial,sans-serif'; ctx37.fillStyle=gra3; ctx37.fillText('Canvas',100,240);​ strokeText(..