반응형
2022.06.06 - [Practice] - [JavaScript] JS로 그림판 만들기, 캔버스 만들기 [1/8]
[JavaScript] JS로 그림판 만들기, 캔버스 만들기 [1/8]
3달 전쯤 배운 JS가 기억이 가물가물해서 간단한 미니프로젝트도 해볼겸 JS로 간단한 그림판을 한 번 만들어볼게요!! 먼저 index.html, app.js, styles.css 를 만들어줄게요! styles.css @import "reset.css"; bo..
puenti.tistory.com
이전 글에서는 캔버스를 만들어봤다
이제 색칠할 물감을 추가해보자!!
index.html
<!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="control">
<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>
9가지 색상을 넣어준다!
styles.css
@import "reset.css";
body {
background-color: #f6f9fc;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
display: flex;
flex-direction: column;
align-items: center;
padding: 50px 0px;
}
.canvas {
width:700px;
height: 700px;
background-color: white;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.controls {
margin-top: 80px;
display: flex;
flex-direction: column;
align-items: center;
}
.controls .controls__colors {
display: flex;
}
.controls__colors .controls__color {
width: 50px;
height: 50px;
border-radius: 25px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}
controls에 스타일 추가해주기!

9가지 물감이 추가 되었다!!
더 자세하게 알고 싶으면 아래 사이트를 참고하면 문서로 잘 설명되어 있다!!
https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial
캔버스 튜토리얼 - Web API | MDN
<canvas>는 HTML 요소 중 하나로서, 스크립트(보통은 자바스크립트)를 사용하여 그림을 그리는 데에 사용됩니다. 예를 들면, 그래프를 그리거나 사진을 합성하거나, 간단한(혹은 복잡할 수도 있는)
developer.mozilla.org
반응형
'Practice' 카테고리의 다른 글
[JavaScript] JS로 그림판 만들기, 마우스 기능 추가하기 [4/8] (0) | 2022.06.06 |
---|---|
[JavaScript] JS로 그림판 만들기, save, fill 버튼, range 추가하기! [3/8] (0) | 2022.06.06 |
[JavaScript] JS로 그림판 만들기, 캔버스 만들기 [1/8] (0) | 2022.06.06 |
JSP로 반응형 게시판만들기[9/9], 메인페이지 디자인 (0) | 2022.04.29 |
JSP로 반응형 게시판 만들기[8/9], 게시글 삭제 및 수정 기능 (0) | 2022.04.29 |