Canvas API
: JS, HTML 요소를 통해 그래픽을 그리는 방법을 제공한다.
1. JS에서 canvas/context 불러오기ex) <body> <canvas></canvas> <script src="app.js"></script> </body>// canvas 요소 가져오기. const canvas = document.getElementByID("canvas"); // canvas 요소의 context(그림이 렌더링될 항목) 가져오기 const ctx = canvas.getContext("2d");
- context : canvas에 그림을 그릴 때 사용하는 붓.
- canvas 크기 설정
- CSS에서 캔버스 크기 설정 후, JS에도 작성한다.
(추후, width/height 수정은 JS에서 한다.)
- canvas 좌표
- 가로 x, 세로 y
- canvas 좌 상단 좌표 = (0, 0)
fillRect();
: 사각형을 채우는 함수
- ctx.fillRect(x 좌표, y 좌표, width, heigth);
beginPath();
: 새로운 경로를 만든다.
- fillRect();는 shortcut, 원래 사각형을 채우기 위해서는 더 많은 단계가 필요하다.
1) 사각형 선 그리기 : ctx.rect(x 좌표, y 좌표, width, heigth);
(이 때, 색이 선택되지 않아 사각형이 보이지 않는다.)
2) 색 입히기 : ctx.stroke(); or ctx.fill(); 을 작성해 테두리만 그리거나 사각형 전체를 채운다.
3) 먼저 만든 사각형과 다른 색을 입히고 싶을 땐, 새로운 경로를 만들어 준다.(=ctx.beginPath();)ex) ctx.rect(100, 100, 100, 100); ctx.fill(); // 여기서부터 새로운 경로. ctx.begtinPath(); ctx.rect(200, 200, 100, 100); ctx.fillStyle = "red";
- ctx.fillStyle : 채우기 색을 정한다.
moveTo(); 와 lineTo();
- rect();도 shortcut, moveTo(); 와 lineTo(); 로 나눌 수 있다.
- moveTo(x, y);
: 브러쉬의 좌표를 설정한다.- lineTo(x, y)
: 라인을 그려준다.ex) // 초기 좌표 (0, 0)에서 (50, 50)으로 이동 ctx.moveTo(50, 50); // (50, 50) 좌표에서 (150, 50) 좌표로 이동 ctx.lineTo(150, 50); // 수평인 직선을 그리려면 moveTo();와 lineTo();의 y좌표값이 같아야한다. // 라인이 끝난 점이 다음에 시작하는 브러쉬의 시작 좌표이다.
- 결론 : fillRect(); = fill(); + Rect(); = fill(); + (moveTo(); + lineTo();)
lineWidth
: stroke의 두께를 바꿀 수 있다.
ex) ctx.lineWidth = 2; // !! stroke의 두께를 바꿀 때, 스타일 효과가 효과를 주려는 선 위에 작성되어야 한다. ctx.lineWidth = 2; ctx.strokeRect(300, 300, 50, 100);
삼각형 만들기
moveTo(); + lineTo(); + stroke(); or fill();
원 만들기
ctx.arc(x 좌표, y 좌표, radius(반지름), startAngle, endAngle);
ex) ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx 상태 저장 및 불러오기
- ctx.save();
: ctx의 현재 상태(색상, 스타일 등 모든 것)를 저장한다.- ctx.restore();
: 저장된 ctx의 현재 상태를 불러온다.ex) ctx의 상태 수정 후, 수정 전의 상태를 불러오고 싶을 때, // ctx의 현재 상태 저장 ctx.save(); // 수정하려는 부분 작성 --> 이때, save();와 restore(); 사이의 수정된 부분은 저장되지 않는다. // 수정 완료 후, 수정 전 ctx 상태 불러오기 ctx.restore();
+ attribute : data-
: "-" 뒤에 넣고 싶은 값을 넣어 줄 수 있다.
(html 요소 안에 넣고 싶은 값을 자유롭게 넣을 수 있고, 이 값을 JS에서 활용할 수 있다.)ex) <body> <!-- data-color 값 작성 --> <div class="color-option" style="background-color: #1abc9c" data-color="#1abc9c"> </div> </body>// array가 아닌 요소들을 forEach를 통해 각각 함수를 실행하기 위해 array로 변환 const colorOptions = Array.from(document.getElementsByClassName("color-option")); // array의 각각의 item에 function 실행 colorOptions.forEach((color) => color.addEventListener("click", onColorClick)); // item에 실행될 함수, 여기서 target이 되는 dataset.color가 html에서 작성된 data-color 값이다. function onColorClick(event) { const colorValue = event.target.dataset.color; ctx.strokeStyle = ctx.fillStyle = color.value = colorValue; }
addEventListener을 추가하는 새로운 방법
1) 원래 사용하던 방법
: element.addEventListener("event", function);2) 새로운 방법
: element.onevent = functionex) canvas.addEventListener("mousemove", onMove); = canvas.onmousemove = onMove;
