canvas

😄 code 1. 선 , 사각형 그리기

// HTML
<canvas id="coordinate" width="500px," height="500px"></canvas>

// JavaScript
// id값으로 canvas 요소 가져오기
const canvas = document.getElementById('coordinate');

// 2d모드로 그리기 (2d뿐만 아니라 다양한 Context가 있다)
const ctx = canvas.getContext('2d');

// 바로 사각형이 그려짐
ctx.fillRect(0, 100, 200, 75);

// 위에서 그린 사각형 색상 설정
ctx.fillStyle = 'black';

// 선 색 기본값 지정 (처음 시작할 때의 값)
ctx.strokeStyle = 'blue';

// 선 두께 기본값 지정 (처음 시작할 때의 값)
ctx.lineWidth = 2;

// 선 출발점 (50px, 50px 떨어진 위치에서 시작)
ctx.moveTo(50, 50);

// 선 도착점 (100px, 200px 떨어진 위치 도착)
ctx.lineTo(100, 200);

// 선 그리기 (moveTo ~ lineTo 사이 선 그리기)
ctx.stroke();

// 선의 새로운 경로 시작
ctx.beginPath();

// 선 끝부분 설정
ctx.lineCap = "square"; // butt(default), square, round
// 선 꺾인부분 설정
ctx.lineJoin = 'round'; // mitter(default), round, bevel
// 점선 그리기
// 선의 크기는 10px, 공백의 크기는 20px
ctx.setLineDash([10, 20]);

• canvas는 id값으로 지정하는 것이 좋기 때문에 위의 코드에서는 id를 사용했지만 class로 지정해도 상관없다

• canvas 크기는 필수적으로 지정해야하며 canvas 태그 내에 설정하는 것이 좋다 (CSS에서 설정하면 화면 깨질수도 있기 때문에)

• 새로운 선 그릴 때 beginPath() 호출 안하면 직전 도착 지점부터 그려진다

fillRect(x, y, width, height) ?

• 지정한 x,y 좌표만큼 떨어진 위치에서 지정한 width, height만큼 사각형을 그린다

😄 code 2. 원 그리기

// HTML
<canvas id="coordinate" width="500px," height="500px"></canvas>

// JavaScript
// id값으로 canvas 요소 취득
const canvas = document.getElementById('coordinate');
// 2d모드의 그리기 객체 취득, 이 객체를 이용하여 canvas에 그림을 그린다
const ctx = canvas.getContext('2d');
// ctx.arc(x, y, radius, startAngle, endAngle, clockwise)
// radius : 반지름
// startAngle : 호의 시작점
// endAngle : 호의 끝점
// clockwise (optional) 
ctx.arc(100, 100, 80, Math.PI * 1.5, Math.PI * 1);
// 원 그리기
ctx.stroke();
// 원 내부 색 채우기
ctx.fillStyle = 'blue';
ctx.fill();

beginPath()

• 현재 경로 시작 (ex 선 그리기 시작)

closePath()

• 현재 경로 종료 (ex 선 그리기 종료)

clockwise ?

• option으로 생략 가능
• default는 false이며 시계방향, true는 반시계 방향으로 그린다

startAngle, EndAngle

• 호의 시작점과 호의 끝점
• 숫자로 표시 안한다
• Math.PI * 1.5 : 12시
• Math.PI * 2 : 15시
• Math.PI * 0.5 : 18시
• Math.PI * 1 : 21시

😄 code 3. 이미지 그리기

// HTML
<canvas id="coordinate" width="500px" height="500px"></canvas>

// JavaScript
const canvas = document.getElementById('coordinate');
const ctx = canvas.getContext('2d');
// 이미지 객체 생성
const image = new Image();
// 이미지 경로 설정
image.src = '../img/target.png';
// 이미지가 로드되면 그리기 시작
image.onload = function () {
  // 패턴 생성, x축만 반복
  const pattern = ctx.createPattern(image, 'repeat-x');
  // 생성한 패턴 적용
  ctx.fillStyle = pattern;
  // 이미지 그리기
  // ctx.drawImage(image, x, y, width, height);
  ctx.drawImage(image, 50, 50, 80, 30);
  // canvas의 너비, 높이만큼 반복해서 그리기
  ctx.fillRect(0, 0, canvas.width, canvas.height);
};

• width와 height는 optional

createPattern() ?

• repeat : 이미지 패턴 반복
• repeat-x : x축만 반복
• repeat-y : y축만 반복
• no-repeat : 반복 안함

😄 code 4. 텍스트 그리기

// HTML
<canvas id="coordinate" width="500px" height="500px"></canvas>

// JavaScript
const canvas = document.getElementById('coordinate');
const ctx = canvas.getContext('2d');
// 글자 색 설정
ctx.fillStyle = 'blue';
// 폰트 설정
ctx.font = 'italic bold 20px Arial';
// 텍스트 좌우 정렬
ctx.textAlign = 'left';
// 텍스트 상하 정렬
ctx.textBaseline = 'alphabetic';
// 텍스트 그리기
//ctx.fillText("텍스트", x좌표, y좌표, 최대 너비)
ctx.fillText('텍스트 그리기 도전!!', 50, 50, 200);
// 텍스트 외곽선 그리기
ctx.strokeText('텍스트 외곽선 입니다!!', 50, 50, 200);
// 텍스트 외곽선 색 설정
ctx.strokeStyle = 'red';

font ?

• style : normal(default) / italic / oblique
• 굵기 : normal(default) / bold / bolder / lighter
• 크기 : px(default : 10px)
• 서체 : sans-serif(default) / Arial

textAlign ?

• 좌우 정렬
• start(default) / end / center / left / right

textBaseline ?

• 상하 정렬
• alphabetic(default) / top / hanging / middle / ideographic / bottom

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍