HTML5와 JavaScript를 활용하여 브라우저 상에서 CANVAS를 얻고, 지정된 이미지를 로딩하여 CANVAS에 컬러 라인을 그리는 방법에 대해 자세히 알아보겠습니다. 본 가이드는 CANVAS의 기본 개념부터 이미지 로딩, 라인 드로잉까지의 전 과정을 다룹니다.
CANVAS란?
CANVAS는 HTML5에서 제공하는 요소로, 스크립트를 사용하여 그래픽을 그릴 수 있는 공간을 제공합니다. 주로 게임, 데이터 시각화, 애니메이션, 이미지 편집 등의 목적으로 사용됩니다. CANVAS 요소는 비트맵 기반의 이미지를 다루며, JavaScript를 통해 다양한 그래픽을 생성하고 조작할 수 있습니다.
CANVAS 기본 설정
먼저 HTML 문서에서 CANVAS 요소를 설정하는 방법에 대해 알아보겠습니다. 다음은 기본적인 HTML 구조입니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CANVAS 예제</title>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
<script src="script.js"></script>
</body>
</html>위의 코드는 간단한 CANVAS 요소를 생성하고, JavaScript 파일을 불러오는 예제입니다. 이제 이 CANVAS에 이미지를 로딩하고 라인을 그리는 방법을 살펴보겠습니다.
JavaScript를 이용한 이미지 로딩
JavaScript를 이용하여 CANVAS에 이미지를 로딩하려면, Image 객체를 사용해야 합니다. 다음은 JavaScript 코드 예제입니다:
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var img = new Image();
img.src = 'http://www.xxx.xxx/images/755d6f164fd0bd84caea.jpg';
img.onload = function() {
var scale = (600 / img.width);
var L = 13 * scale;
var T = 434 * scale;
var R = 1402 * scale;
var B = 1145 * scale;
context.canvas.height = img.height * scale;
context.drawImage(img, 0, 0, context.canvas.width, context.canvas.height);
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = 'blue';
context.moveTo(L, T);
context.lineTo(R, T);
context.lineTo(R, B);
context.lineTo(L, B);
context.closePath();
context.stroke();
};이 코드는 이미지를 CANVAS에 로딩하고, 지정된 좌표에 따라 파란색 라인을 그립니다.
이미지 스케일링
이미지를 CANVAS에 로딩할 때, 원본 이미지의 크기를 조정해야 하는 경우가 많습니다. 위 예제에서는 이미지의 가로 크기를 600으로 맞추고, 그에 따라 세로 크기를 비율에 맞게 조정합니다. 이를 통해 이미지가 CANVAS에 맞게 잘려 보이는 것을 방지할 수 있습니다.
라인 드로잉
CANVAS에 이미지를 로딩한 후, 특정 영역에 라인을 그리는 방법에 대해 알아보겠습니다. context.beginPath(), context.moveTo(), context.lineTo(), context.closePath(), context.stroke() 메서드를 사용하여 라인을 그릴 수 있습니다. 라인의 스타일은 context.lineWidth와 context.strokeStyle 속성을 통해 설정할 수 있습니다.
예제 코드 설명
- context.beginPath(): 새로운 경로를 시작합니다.
- context.moveTo(x, y): 경로의 시작점을 설정합니다.
- context.lineTo(x, y): 경로를 현재 위치에서 지정된 좌표까지 연결합니다.
- context.closePath(): 경로를 닫습니다.
- context.stroke(): 현재 경로를 따라 선을 그립니다.
결론
이 글에서는 HTML5 CANVAS 요소를 이용하여 이미지를 로딩하고, JavaScript를 활용하여 CANVAS에 라인을 그리는 방법에 대해 다루었습니다. CANVAS는 다양한 그래픽 작업에 유용하며, 이를 통해 복잡한 그래픽 작업도 쉽게 수행할 수 있습니다.
'자바스크립트' 카테고리의 다른 글
| 인풋 텍스트나 텍스트에어리어의 Placeholder 동적으로 변경하는 방법 (0) | 2024.08.23 |
|---|---|
| Node.js 콘솔 모듈의 모든 기능 완벽 정리 (0) | 2024.08.14 |
| 자바스크립트 lastIndexOf() 메서드사용법 (0) | 2024.02.28 |
| jQuery length 속성 사용법 (0) | 2024.02.28 |
| jQuery 파일이름 얻기 (0) | 2024.02.28 |