TIL-2024.04.22 - Canvas - 004 - Canvas 텍스트 & 이미지

 

 

 

질문:

1. Canvas 에서 텍스트와 이미지는 어떻게 표현할 수 있어 ? 

 

 

 

텍스트 처리: 텍스트 그리기, 텍스트 스타일링과 폰트 설정

- Canvas를 사용하여 텍스트를 그리고 스타일링하는 방법

 

1. 텍스트 그리기

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 텍스트 그리기
ctx.font = '24px Arial'; // 폰트 설정
ctx.fillStyle = 'white'; // 텍스트 색상 설정
ctx.fillText('Hello, Canvas!', 50, 50); // (텍스트, x, y)

 

 

 

 

- 위 코드에서 font 속성을 사용하여 텍스트의 폰트와 크기를 설정

- fillStyle 속성을 사용하여 텍스트의 색상을 설정.

- 그 후 fillText() 메서드로 텍스트를 그림.

 

 

 

2. 텍스트 스타일링과 폰트 설정

// 폰트 스타일 설정
ctx.font = 'bold 36px Times New Roman'; // 굵은체, 크기 설정
ctx.fillStyle = 'red'; // 텍스트 색상 설정
ctx.fillText('Styled Text!', 100, 100); // (텍스트, x, y)

 

 

 

 

 

- 위 코드에서 font 속성을 사용하여 텍스트의 폰트와 크기를 설정

- fillStyle 속성을 사용하여 텍스트의 색상을 설정.

- 그 후 fillText() 메서드로 텍스트를 그림.

 

 

이미지 다루기: 이미지 그리기, 이미지 로딩과 활용

- Canvas를 사용하여 이미지를 그리고 로딩하는 방법

 

 

 

1. 이미지 그리기 (drawImage())

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const img = new Image();
img.src = 'https://source.unsplash.com/random/300×300'; // 이미지 경로

img.onload = function() {
    // 이미지 그리기
    ctx.drawImage(img, 50, 50, 200, 150); // (이미지, x, y, width, height)
};

 

 

 

 

 

- 위 코드에서 drawImage() 메서드를 사용하여 이미지를 그림.

- 이미지가 로드된 후에 onload 이벤트 핸들러에서 이미지를 그리도록 설정.

 

 

 

2. 이미지 로딩과 활용

- 이미지가 로드되기 전에 그리려고 하면 이미지가 표시되지 않을 수 있어 이미지 로드가 완료된 후에 drawImage()를 호출해야함.

 

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

const img = new Image();
img.src = 'https://source.unsplash.com/random/300×300'; // 이미지 경로

img.onload = function() {
    // 이미지를 캔버스 크기에 맞게 조절하여 그리기
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // (이미지, x, y, width, height)
    
    // 이미지 위에 텍스트 그리기
    ctx.font = '24px Arial';
    ctx.fillStyle = 'white';
    ctx.fillText('Beautiful Image', 50, 50);
};

 

 

 

 

 

 

 

 

- 위 예제에서는 이미지가 로드된 후에 캔버스 크기에 맞게 이미지를 조절하여 그리고, 그 위에 텍스트를 추가하여 표시.