'1분 코딩, 캔버스 라이브 강좌'를 보며 공부!

Canvas 시작 전 Modernizr에 대해서도 알아보자.

◻️ Modernizr

모더나이저(Modernizr)는 작은 크기의 오픈소스 자바스크립트 라이브러리로서, 사용자가 현재 이용중인 웹 브라우저에서 HTML5와 CSS3의 명세에 정의된 기능 중 어떤 기능을 지원하는지를 알아볼 때 사용.

Modernizr.com에 들어가 본인이 필요한 부분을 다운로드 하여 소스에 삽입 해주면 됨.
(ex. 캔버스를 사용하기 전 브라워가 캔버스를 지원하는지 확인하는 용도)

// 캔버스 지원하는지 확인 방법 01
<script src="Modernizer.js"></script>
if(Modernizer.canvas) {
   console.log('Canvas를 지원하는 브라우저');
 }

// 캔버스 지원하는지 확인 방법 02
const canvas = document.querySelector('canvas');
if(canvas.getContext) {
  console.log('캔버스 지원');
}

---

Canvas란?

---

canvas는 HTML의 태그로서 캔버스 스크립트 API 또는 WebGL API와 함께 사용하여 그래픽과 애니메이션을 그릴 수 있습니다.(그래픽을 그리기 위한 수단)
svg와 cansvas의 차이점 -> svg: 벡터/ canvas: 비트맵

💡 캔버스의 사이즈는 태그 안에 적는 것이 좋음!

캔버스의 사이즈를 두배로 설정 해놓고 css에서 강제로 반으로(원하는 사이즈)로 줄이면 해상도가 더 좋아짐(but 성능은 느려질 수 있음)

✔️ Canvas01~03 예제

◻️ Canvas01 예제 설명

//canvas01
const canvas1 = document.querySelector('.canvas1');
const context1 = canvas1.getContext('2d');

context1.fillRect(50, 50, 100, 100);
context1.fillStyle = 'red';
context1.fillRect(0, 0, 100, 100);
context1.clearRect(80, 80, 50, 50);
context1.strokeRect(150, 150, 100, 100);

캔버스를 사용하기 위한 변수 선언(기본 세팅)
const canvas = document.querySelector('.canvas');
const context = canvas1.getContext('2d');
ㅤ
캔버스 속성

• fillRect(x, y, w, h): 좌표 및 사이즈
• fillStyle = 'red': 도형 스타일
• fillRect(x, y, w, h): 채워진 사각형 도형
• clearRect(x, y, w, h): 도형을 정해진 위치에 지워주는 함수
• strokeRect(x, y, w, h): 선/ 획을 긋는 함수

◻️ Canvas02 예제 설명

//canvas02
const canvas2 = document.querySelector('.canvas2');
const context2 = canvas2.getContext('2d');

context2.beginPath();
context2.moveTo(100,100);
context2.lineTo(300,200);
context2.stroke();
context2.closePath();

캔버스 속성

• beginPath(): 패스 작성을 시작하겠다는 함수(중요!!!)
• moveTo(x, y): 그림X, 붓을 해당 좌표로 옮김
• lineTo(x, y): 선을 그림(stroke나 fill과 함께 호출해야 보임)
• closePath(): 패스 작성을 끝내주는 함수

◻️ Canvas03 예제 설명

//canvas03
const canvas3 = document.querySelector('.canvas3');
const context3 = canvas3.getContext('2d');

context3.arc(300, 200, 50, 0, 라디안(360), false);
context3.fill();
context3.beginPath();
context3.arc(100, 100, 70, 0, 라디안(180), true);
context3.fill();
context3.beginPath();
context3.arc(400, 100, 50, 0, 라디안(120), false);
context3.stroke();

// 라디안 값 구하기(파이)
function 라디안(각도) {
  return 각도 * Math.PI / 180;
};

캔버스 속성

• arc(x, y, 반지름, 시작각도, 끝각도(라디안값), false): 호를 그리는 메서드(원 그릴때 사용)
• fill(): 사이즈 만큼 채워주는 함수
• stroke(): 사이즈 만큼 선을 그려주는 함수
  
  Math.PI
• Math.PI: 파이의 값(원주율)

.
.
.
.

💡여러 도형을 그릴땐 beginPath()를 이용해 시작값 꼭 설정!

각도는 라디안값을 사용해야 함 -> 쉽게 계산하기 위해 Math.PI를 이용해 라디안값을 구하는 함수 작성
.
.
❔ fillRect vs fill / strokeRect vs stroke 차이점을 모르겠음