Practice

[JavaScript] JS로 그림판 만들기, 물감 추가하기 [2/8]

Juun 2022. 6. 6. 07:27
반응형

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

 

반응형