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 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..