반응형
2022.06.06 - [Practice] - [JavaScript] JS로 그림판 만들기, 물감 추가하기 [2/8]
[JavaScript] JS로 그림판 만들기, 물감 추가하기 [2/8]
2022.06.06 - [Practice] - [JavaScript] JS로 그림판 만들기, 캔버스 만들기 [1/8] [JavaScript] JS로 그림판 만들기, 캔버스 만들기 [1/8] 3달 전쯤 배운 JS가 기억이 가물가물해서 간단한 미니프로젝트도 해볼..
puenti.tistory.com
이전 글에서 색상까지 추가해봤다!!
이제 이걸 저장하고 채워줄 버튼과 붓 두께를 설정해줄 range를 만들어보자!
먼저 index.html에서 save, fill 버튼과 range를 만들어준다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>PaintJS</title>
</head>
<body>
<canvas id="jsCanvas" class="canvas"></canvas>
<div class="controls">
<div class="controls__range">
<input
type="range"
id="jsRange"
min="0.1"
max="5"
value="2.5"
step="0.1"/>
</div>
<div class="controls__btns">
<button id="jsMode">Fill</button>
<button id="jsSave">Save</button>
</div>
<div class="controls__colors" id="jsColors">
<div
class="controls__color jsColor"
style="background-color:#2c2c2c"
></div>
<div
class="controls__color jsColor"
style="background-color:white"
></div>
<div
class="controls__color jsColor"
style="background-color:#FF3B30"
></div>
<div
class="controls__color jsColor"
style="background-color:#FF9500"
></div>
<div
class="controls__color jsColor"
style="background-color:#FFCC00"
></div>
<div
class="controls__color jsColor"
style="background-color:#4CD963"
></div>
<div
class="controls__color jsColor"
style="background-color:#5AC8FA"
></div>
<div
class="controls__color jsColor"
style="background-color:#0579FF"
></div>
<div
class="controls__color jsColor"
style="background-color:#5856D6"
></div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
그 다음은 styles.css 에서 버튼 스타일을 추가해주자!
.controls .controls__btns {
margin-bottom: 30px;
}
.controls__btns button {
all: unset;
cursor: pointer;
background-color: white;
padding: 5px 0px;
width: 80px;
text-align: center;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
border: 2px solid rgba(0, 0, 0, 0.2);
color: rgba(0, 0, 0, 0.7);
text-transform: uppercase;
font-weight: 800;
font-size: 12px;
}
.controls__btns button:active {
transform: scale(0.98);
}
.controls .controls__range {
margin-bottom: 30px;
}
Fill, SAVE 버튼과 붓 두께를 조절해주는 range가 이쁘게 추가 되었다ㅎㅎ
더 자세하게 알고 싶으면 아래 사이트를 참고하면 문서로 잘 설명되어 있다!!
https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial
캔버스 튜토리얼 - Web API | MDN
<canvas>는 HTML 요소 중 하나로서, 스크립트(보통은 자바스크립트)를 사용하여 그림을 그리는 데에 사용됩니다. 예를 들면, 그래프를 그리거나 사진을 합성하거나, 간단한(혹은 복잡할 수도 있는)
developer.mozilla.org
반응형
'Practice' 카테고리의 다른 글
| [JavaScript] JS로 그림판 만들기, 그림 그려보기[5/8] (0) | 2022.06.06 |
|---|---|
| [JavaScript] JS로 그림판 만들기, 마우스 기능 추가하기 [4/8] (0) | 2022.06.06 |
| [JavaScript] JS로 그림판 만들기, 물감 추가하기 [2/8] (0) | 2022.06.06 |
| [JavaScript] JS로 그림판 만들기, 캔버스 만들기 [1/8] (0) | 2022.06.06 |
| JSP로 반응형 게시판만들기[9/9], 메인페이지 디자인 (0) | 2022.04.29 |