목록JS (3)

Coding Archive

canvas js로 구현하기 (7) - saving canvas painting [캔버스 그림 저장하기]

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..
💻 Programming/Java Script 2022. 10. 7. 11:35
canvas js로 구현하기 (6) - canvas drawing image[캔버스에 이미지 출력하기 - 사진첨부]

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을 클릭..
💻 Programming/Java Script 2022. 10. 7. 10:11
canvas js로 구현하기 (5) - canvas drawing text [캔버스에 텍스트 출력하기]

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 { ..
💻 Programming/Java Script 2022. 10. 5. 23:58
이전 Prev 1 Next 다음