https://github.com/crud0626/web_paint

Web에서 사용하는 윈도우의 그림판(Paint)
https://github.com/crud0626/web_paint

Last synced: 5 days ago
JSON representation

Web에서 사용하는 윈도우의 그림판(Paint)

• Host: GitHub
• URL: https://github.com/crud0626/web_paint
• Owner: crud0626
• Created: 2021-02-16T07:15:49.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-04-16T15:01:35.000Z (over 3 years ago)
• Last Synced: 2024-11-09T22:08:54.137Z (2 months ago)
• Language: JavaScript
• Size: 299 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Web_Paint

![ezgif com-gif-maker](https://user-images.githubusercontent.com/72868495/108030615-dcec7a00-7072-11eb-84b7-1f45ac324271.gif)

canvas API를 활용한 Web에서 사용하는 그림판

## 사용스택

- HTML, CSS, Vanilla JS

## 특징 (Features)

- 윈도우의 그림판처럼 직접 그림을 그릴 수 있다.

- 저장버튼을 만들어 놓아 canvas부분만 저장 가능하며 우클릭으로는 canvas화면을 저장하지 못하도록 하였다.

- 붓의 사이즈 조절이 가능하다.

- 주어진 색깔을 활용하여 배경의 색을 채울 수 있다.

## 개인적으로 추가한 기능

**1. favicon 추가**

**2. Clear 버튼 추가**

- 새로고침을 해야만 canvas가 초기 상태로 돌아갔던 문제점 보완

**3. 배경을 채우는 fill버튼의 동작 변경**

- 기존동작방식 : fill버튼 클릭 -> 색깔 클릭 -> 캔버스클릭

  변경후 : fill버튼 클릭 -> 색깔 클릭

**4. Eraser 기능 추가**

- 지우개 기능과 버튼을 추가하였다.

> 기능 추가 예정