canvas:그래픽을 위한 컨테이너 역할[div 같은것]
테두리,콘텐츠가 없는 단순 사각형 형태이고 style을 이용하여 크기 설정을 할 수 있으며 id 속성을 쓴다.
캔버스 요소의 id 들고오기
let 변수명(공간명) = document.getElementByID(“id이름”);
그릴 개체 만들기
let 변수명2(공간명2) = (위의 변수명).getContext(“개체명”);
스크립트 작성
변수명2.~
자바스크립트 내용들
사각형 : fillStyle=”원하는색”;-색 지정 / fillRect(x시작값,y시작값,가로길이,세로길이); 출력
선 : strokeStyle=”원하는색”; / moveTo(x시작값,y시작값); / lineTo(x끝값,y끝값); / stroke(); 선 생성해줌
글자 : font=”글자크기 글꼴스타일”; / fillText(“입력문자”,x위치,y위치); / strokeText(fill과 동일,)-안이 빈 글자 . 이때 글자 크기보다 작은 y축을 잡으면 출력이 안된다.(왼쪽 아래를 기준으로 하기 때문)
그라데이션 : let 변수=상위변수.createRadialGradient(안원 중점,안원 반지름,바깥원중점,바깥원 반지름); Radial 대신 Linear을 넣으면 단방향 그라데이션(x,y축만 잡아주면 된다)
색 지정 : 변수.addColorStop(0,”색”); 0이면 안쪽 원, 1이면 바깥 원. Linear이면 0은 시작지점, 1은 끝지점
출력은 상위변수.fillStyle=변수; 상위변수.위 사각형 출력형태;
svg : 확장 가능한 벡터 그래픽
선
<line x1="" y1="" x2="" y2="" stroke="선 색" stroke-width="선두께"></line>
원
<circle cx="" cy="" r="" fill="내부색" stroke="둘레색"></circle>
canvas와 svg의 차이
canvas : 화면이 작거나 픽셀 수가 많을 때(>10k)
svg : 화면이 크거나 픽셀 수가 적을 때(<10k)