이미지를 팝아트 스타일로 변경하기 위해서는 JavaScript와 HTML5 <canvas> 요소를 사용할 수 있습니다. 아래는 단계별로 팝아트 이미지를 만드는 방법입니다.
HTML 파일 생성:
HTML 파일을 생성하고, 이미지를 표시할 <canvas> 요소를 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>팝아트 이미지</title>
</head>
<body>
<canvas id="popArtCanvas" width="500" height="400"></canvas>
<img id="sourceImage" src="your-image.jpg" alt="원본 이미지">
<script src="script.js"></script>
</body>
</html>
<canvas> 요소는 팝아트 이미지를 그릴 캔버스를 나타냅니다.
<img> 요소에 src 속성을 사용하여 원본 이미지 파일을 지정하세요.
JavaScript 파일 생성:
JavaScript 파일(script.js)을 생성하고, 이미지를 로드하고 팝아트 스타일로 그리는 코드를 작성합니다.
const canvas = document.getElementById('popArtCanvas');
const ctx = canvas.getContext('2d');
const sourceImage = document.getElementById('sourceImage');
sourceImage.onload = function() {
// 원본 이미지를 캔버스에 그리기
ctx.drawImage(sourceImage, 0, 0, canvas.width, canvas.height);
// 이미지를 팝아트 스타일로 변경
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const red = data[i];
const green = data[i + 1];
const blue = data[i + 2];
// RGB 색상값 조절 (팝아트 스타일)
data[i] = red - (red % 64);
data[i + 1] = green - (green % 64);
data[i + 2] = blue - (blue % 64);
}
// 변경된 이미지 데이터를 캔버스에 다시 그리기
ctx.putImageData(imageData, 0, 0);
};
위 코드에서는 원본 이미지를 로드하고, RGB 색상값을 조절하여 팝아트 스타일로 변경합니다.
결과 확인:
웹 브라우저에서 HTML 파일을 열어 팝아트 스타일로 변경된 이미지를 확인합니다.
'HTML 예제' 카테고리의 다른 글
| 동적 그래프: JavaScript와 HTML5 <canvas>로 동적 그래프 생성 (0) | 2023.12.06 |
|---|---|
| 타이핑 효과: JavaScript로 타이핑 효과 구현 (0) | 2023.12.06 |
| 투명한 텍스트: 텍스트 내용이 배경 이미지와 일부 투명하게 표시 (0) | 2023.12.06 |
| 웹 캐러셀: 이미지 슬라이드 쇼와 버튼으로 제어하는 웹 캐러셀 (0) | 2023.12.06 |
| 타자 연습 게임: JavaScript로 타자 연습 게임 만들기 (1) | 2023.12.06 |
