Coding Archive

saving canvas painting 캔버스에 그린 그림을 저장하는 방법을 알아보겠습니다. [ html / css ] 1 2 3 4 save image Colored by Color Scripter cs html에서 캔버스와 세이브 버튼을 만들어 줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 body { padding: 44px; display: flex; flex-direction: column; align-items: center; background-color: #f7f7f7; } canvas { background-color: white; border-radius: 5%; bo..

canvas drawing image 캔버스에 사진을 첨부할 수 있는 방법을 알아보겠습니다. [ html / css ] 1 2 3 4 Colored by Color Scripter cs accept 속성을 추가해 첨부하려는 file을 특정할 수 있습니다. (accept="image/*" ->모든 이미지 파일을 허용한다는 의미) 이렇게 input file을 만들게 되면 위의 기본 스타일처럼 그려지게 됩니다. 하지만 css를 변경할 수 없기 때문에 스타일을 변경하고 싶은 경우라면 label을 사용해 해결할 수 있습니다. 1 2 3 4 5 6 7 Add Photo Colored by Color Scripter cs 라벨 태그의 for 속성을 이용해 input file 태그와 연결을 시켜주면, label을 클릭..

canvas drawing text 캔버스에 더블클릭으로 간단하게 원하는 텍스트를 출력할 수 있는 함수를 구현해보았습니다. [ html / css ] 1 2 3 4 Colored by Color Scripter cs html에서 캔버스, 타입이 텍스트인 인풋을 만들어 줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 body { padding: 50px; display: flex; flex-direction: column; align-items: center; background-color: rgba(0, 0, 0, 0.05); } canvas { ..

canvas color palette 간단하게 브러시 색상을 바꾸는 함수를 만들어 보았습니다. [ html ] 1 2 3 4 5 6 7 8 9 10 11 12 Colored by Color Scripter cs div를 사용해 원하는 color들을 만들어 줍니다. [ js ] 1. 1 const colors = document.querySelectorAll(".color"); cs querySelector는 수많은 color div 중 오직 맨 처음 하나의 div만 선택합니다. 이럴 때 사용 가능한 건 querySelectorAll입니다. All이 붙으면 하나가 아닌 모든 color div를 선택할 수 있어 getElementsByClassName과 같은 효과를 볼 수 있습니다. 2. 1 2 3 4 5 ..

canvas drawing mode변경하기(fill/draw) 기본 상태는 draw 상태지만 fill 버튼을 누르면 canvas에 색을 채울 수 있도록 만들어 봤습니다. 1 . html 요소 선택, 접근하기 1 const modeBtn = document.querySelector(".modeBtn"); cs querySelector를 사용해 원하는 html 요소를 찾습니다. 2 . 버튼에 클릭 이벤트 주기 / 모드 변환 함수 구현하기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 const modeBtn = document.querySelector(".modeBtn"); let filling = false; function onModeClick() { if (!filling) { ..

canvas js로 구현하기 앞서 배운 내용을 바탕으로 js에서 그리기 함수를 만들어 canvas를 구현해 보았습니다. · html / css html에서 id가 canvas인 canvas 태그를 생성합니다. 1 cs 원하는 디자인대로 css를 작성합니다. 1 2 3 4 5 6 7 8 #canvas { height: 700px; width: 1000px; background-color: white; border-radius: 50px; box-shadow: var(--box-shadow); margin: 0 30px; } Colored by Color Scripter cs · js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 const canvas = docume..

2D Context canvas는 context를 갖고 있는 html 요소로, context는 canvas 안에서 픽셀을 다루는 것입니다. context를 사용하기 위해서는 canvas는 getContext() 메서드가 필요하고, 이 메서드를 통해 canvas에 그림을 그릴 수 있습니다. 2d 그래픽의 경우 "2d"를 넣어줍니다. 1 const ctx = canvas.getContext("2d"); cs canvas 크기 설정 canvas 크기 설정은 css에서 지정한 것과 별도로 다시 지정해줘야 합니다. 1 2 canvas.width = 700; canvas.height = 700; cs * 이렇게 따로 지정하는 일이 없도록 하기 위해＜canvas id="jsCanvas" width="700" heig..

range slider css 변경하기 input 태그의 type속성 중 range의 css를 변경해보았습니다. 먼저 html에서 가장 기본적인 형태를 만들었을 때는 이런 형태의 range slider가 만들어집니다. 1 cs html에서 기본적인 속성들은 조절 가능합니다. (최댓값, 최솟값, 기본값, 조절 값 등) 1 2 3 4 5 6 7 8 cs 그 후 css에서 원하는 모양대로 만들어 줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 /** slider **/ input[type=range] { -webkit-appearance: none; background-color: #e0e0e0; opacity: 0.8; border-radius: 7...