노마드코더/바닐라 JS로 그림 앱 만들기5 그림판 최종 완성본 https://github.com/parkchae/MEMEMAKER_MYSELF 2022. 12. 15. MEME MAKER 밈 메이커 기능을 만들기 시작해 볼껀데 이 기능으로 canvas에 이미지를 넣을 수도 있고 이미지 위에 텍스트도 넣을 수 있다. html에 input 태그를 추가하고 시작해보자. 비디오, 사진 모든 파일을 업로드 가능한데 accept라는 속성을 통해 이미지만 업로드 할 수 있게 해준다. js파일로 넘어와서 이벤트를 주고 사용자가 올린 파일을 console.dir(event.target);으로 확인해보았다. files의 항목에 유저가 올린 파일의 정보가 나와있다. 이것을 아는 것이 매우 중요한게 브라우저는 항상 유저의 실제 파일 시스템과 격리되어있다. 예를들어, 자바스크립트 애플리케이션은 유저의 파일을 읽을 수 없다. 그걸 가능하게 해주는 코드가 존재하지 않는다. 파일들은 유저가 파일을 선택했을 때만 자바.. 2022. 12. 9. PAINTING BOARD (2) 현재는 이쁜 색상을 찾기가 어렵기 때문에 이제 사용자가 색상에 다른 옵션을 줄 수 있도록 해보자. https://flatuicolors.com/palette/defo Flat UI Colors 2 - 14 Color Palettes, 280 colors 🎨 280 handpicked colors ready for COPY & PASTE flatuicolors.com 위의 링크들의 색상을 html로 복사해서 그리고는 vscode로 각각의 색상별로 버튼을 만들어 누르면 색상이 지정이 되는 식으로 만들어 볼 것이다. 이런 식으로 쭉 html에 코드를 작성 하면 화면에 색상들이 보인다. 참고로 data-* 속성이란 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로.. 2022. 12. 9. PAINTING BOARD (1) 우리가 만들 그림판의 프로토타입을 만들어 보자. 목표는 내가 보드를 클릭할 때마다 선을 그리는 것이다. function onClick(event){ console.log(event); } canvas.addEventListener("click", onClink); JS는 항상 event라는 것을 준다. event를 console.log하여 원하는 정보를 볼 수 있다. 우리가 필요한 정보는 클랙했을 때의 위치이다. function onClick(event){ ctx.lineTo(event.offsetX,event.offsetY); ctx.stroke(); } 지금 문제는 처음 클릭했을 때 선이 그려지지 않는다는 점이다. 왜냐면 처음에 moveTo를 쓰지 않았기 때문이다. ctx.moveTo(0,0); 위의.. 2022. 12. 8. THE CANVAS API canvas html element는 canvase API의 창이다. canvase API는 우리가 javascript로 그래픽을 그릴 수 있게 해주는 API이다. WebGL API로 2D 그래픽이나 3D 그래픽을 그릴 수 있다. html 쪽에서는 convas element를 쓰는 것이 전부이다. javascript 쪽에서는 이 element에 접근할 것이다. 그림을 그리기 위해 context라는 것을 얻어야 한다. context라는 이름이 엄청 좋은 이름은 아니지만 근데 이게 문서에서 찾게 될 이름이다. context는 기본적으로 붓(브러쉬)이다. const ctx = canvas.getContext("2d"); //두가지 옵션이 있다. 하나는 2d 다른 하나는 => 이것들은 3d를 위한 것. 캔버스에.. 2022. 12. 6. 이전 1 다음 728x90
