본문 바로가기
반응형

IT82

돌배 배너 이미지 2022. 11. 9.
자바스크립트 canvas 배경 채우기 기능 추가 / recFill() 활용 / recFill(x, y, width, height) / javas 그림판의 필수 기능인 배경 채우기. recFill로 만들 수 있다. 버튼을 추가해 선 드로잉 모드 / 배경 채우기 모드 두가지를 선택할 수 있게했고 원하는 색상으로 배경이 채워진다. index.html 추가된 버튼 태그. 딱 이 한줄 추가되었다. Fill index.html의 전체코드 Fill app.js 추가된 코드 const modeBtn = document.getElementById("mode-btn"); /** 선그리기, 배경채우기 변경 버튼 지정 */ let isFilling = false; /** 선그리기, 배경채우기 / false에서 true값으로 변경시킬 것이므로 let */ function onclickMode(){ /** 선그리기, 배경채우기 - isFilling이 참이면 거짓으로 만들.. 2022. 11. 7.
[자바스크립트] canvas 그림판 만들기 / 색상 보기 만들기 / 선 색상 변경 기능 이번에는 그림판에 정해진 색상을 보기로 제공하여 그 안에서 변경할 수 있도록 하는 기능이다. 무슨 말인지 헷갈리다면 아래 첨부된 그림판 만들기 이전글을 참고한다. 그림판 만들기 이전글 2022.11.02 - [IT/javascript] - [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 2022.11.03 - [IT/javascript] - [자바스크립트] moveTo() lineTo()란? 사각형, 삼각형, 집 그리기 / 바닐라JS 그림 앱 만들기 / #1.3 #1.4 2022.11.03 - [IT/javascript] - [자바스크립트] canvas 그림판 선 긋기, 점 찍기, 색상변경 / offsetX, offsetY, lineWidth.. 2022. 11. 7.
자바스크립트 canvas 그림판 만들기 / 색상 변경 기능 / 색상바 만들기 선 색상을 변경하는 기능으로 다양한 색상을 직접 선택하거나 스포이드로 원하는 색상을 따서 변경할 수 있다. 그림판 만들기 이전글 2022.11.02 - [IT/javascript] - [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 2022.11.03 - [IT/javascript] - [자바스크립트] moveTo() lineTo()란? 사각형, 삼각형, 집 그리기 / 바닐라JS 그림 앱 만들기 / #1.3 #1.4 2022.11.03 - [IT/javascript] - [자바스크립트] canvas 그림판 선 긋기, 점 찍기, 색상변경 / offsetX, offsetY, lineWidth, strokeStyle, stroke() 2022.11.. 2022. 11. 7.
자바스크립트 canvas 그림판 만들기. 마우스 클릭시 선 긋기 moveTo, lineTo, stroke, offsetX, offsetY 이제 드디어 그림판의 가장 기본인 기능. 마우스 왼쪽 클릭시 선이 그어지는 기능을 구현한다. 이전글 2022.11.02 - [IT/javascript] - [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 2022.11.03 - [IT/javascript] - [자바스크립트] moveTo() lineTo()란? 사각형, 삼각형, 집 그리기 / 바닐라JS 그림 앱 만들기 / #1.3 #1.4 2022.11.03 - [IT/javascript] - [자바스크립트] canvas 그림판 선 긋기, 점 찍기, 색상변경 / offsetX, offsetY, lineWidth, strokeStyle, stroke() html과 css는 이전글과 동일. app.. 2022. 11. 4.
[자바스크립트] canvas 그림판 선 긋기, 점 찍기, 색상변경 / offsetX, offsetY, lineWidth, strokeStyle, 이전단계 2022.11.02 - [IT/javascript] - [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 canvas 엘리먼트는 javascript에 그래픽을 그릴 수 있는 API다. 사용방법은 간단하다. html에는 라고 작성하는 게 끝. 그 다음 그래픽을 그리기 위한 모든 작업은 javascript에서 canvas 엘리먼트에 접근한 rootingforme.tistory.com 2022.11.03 - [IT/javascript] - [자바스크립트] moveTo() lineTo()란? 사각형, 삼각형, 집 그리기 / 바닐라JS.. 2022. 11. 3.
[자바스크립트] moveTo() lineTo()란? 사각형, 삼각형, 집 그리기 / 바닐라JS 그림 앱 만들기 / #1.3 #1.4 ctx.rect()도 shorcut function 이었다. rect보다 더 기본적인 기능인 moveTo와 lineTo를 활용해서 사각형을 그릴 수 있다. 그림판으로 그림을 만들려면 가장 작은 단위의 함수를 사용해야한다. moveTo(x, y): 브러쉬를 단순 이동 시켜준다. lineTo(x, y): 선을 그으며 이동한다. *다만 stroke()나 fill()을 사용해야만 선이 나타나거나 윤곽이 보인다. html과 css 코드는 이전 글과 같다. 아래 링크참조. 2022.11.02 - [IT/javascript] - [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 [javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / ca.. 2022. 11. 3.
[javascript] 바닐라JS로 그림 앱 만들기 #1.2 Paths / canvas에서 사각형 그리는 순서 canvas 엘리먼트는 javascript에 그래픽을 그릴 수 있는 API다. 사용방법은 간단하다. html에는 라고 작성하는 게 끝. 그 다음 그래픽을 그리기 위한 모든 작업은 javascript에서 canvas 엘리먼트에 접근한 후 이루어진다. index.html styles.css body { display: flex; justify-content: center; align-items: center; } canvas { width: 800px; height: 800px; border: 5px solid black; display: flex; justify-content: end; } #1.2 사각형을 그리기 위한 단계 사각형 테두리 그리기: ctx.rec(x, y, with, height); ctx.. 2022. 11. 2.
[Adobe] 어도비 7일체험 구독취소 프로그램 무료이용 어도비사의 프로그램을 7일간 무료로 사용할 수 있는 서비스가 있는데 잊지말고 구독취소를 해야 이용료를 내지 않는다! 일주일이 넘어가면 한달이든 일년이든 설정한 이용료가 지불된다. 내 경우엔 아이 돌잔치 영상을 셀프로 제작중인데 원하는 효과가 프리미어에 없고 애프터이팩트에서만 구현가능하여 7일 무료체험하게 되었다. 어도비 프로그램 무료체험 7일전 취소하기 1. 7일 무료체험하고있는 어도비 프로그램실행 > 도움말 > 내 계정 관리 2. 어도비 웹 화면이 열린다 > 플랜관리 클릭 플랜 취소 클릭 3. 계정 비밀번호 입력 4. 플랜 취소 과정 진행 플랜 취소하지말고 변경하라고 해택을 보여주면서 꼬신다. 역시 마케팅 꼬임에 넘어가지 않고 다음으로 진행하면 플랜 취소를 위한 마지막 페이지가 나온다. 확인 버튼 클릭.. 2022. 10. 18.
반응형

티스토리툴바