1.1
<html tag의 id & class>
1) id
- 중복 사용X
- JavaScript에서 다루는 경우, id를 이용
2) class
- 중복 사용O
- 한 <tag>가 여러 개의 class를 가질 수 있음
- css 설정할 경우, class를 이용
<border-radius로 원형 만들기>
- width 설정
- border-radius 값을 width 절반으로 설정
.controls__colors .controls__color {
width: 50px;
height: 50px;
border-radius: 25px;
cursor: pointer;
box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}- cursor: poiner - hover시, 손모양으로 나타나게 함
1.2
<input type range>
- 슬라이드 바를 조정하여 범위 내의 숫자를 선택
<input
type="range"
id="jsRange"
min="0.1"
max="5"
value="2.5"
step="0.1"
/>- min: 최소값
- max: 최대값
- value: 기본값
- step: 간격
2.0
<mouse event 종류>
- click: 마우스 클릭할 때
- dbclick: 마우스 더블클릭할 때
- mousemove: 마우스가 움직일 때
- mousedown: 마우스 누를 때
- mouseup: 마우스 뗄 때
- mouseenter: 마우스가 요소 경계 외부에서 내부로 들어올 때
- mouseleave: 마우스가 요소 경계 내부에서 외부로 벗어날 때
if (canvas) {
canvas.addEventListener("mousemove", onMouseMove); // 마우스 컨버스 내 움직일 때
canvas.addEventListener("mousedown", onMouseDown); // 마우스를 떼지 않고 클릭할 때
canvas.addEventListener("mouseup", onMouseUp); // 마우스를 떼었을 때
canvas.addEventListener("mouseleave", stopPainting); // 마우스 캔버스 벗어났을 때
}https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=shdlsdo&logNo=220569091021
마우스이벤트 종류: click, dbclick, mousedown, mouseup, mouseenter 등등
발생하는 알림을 처리할 경우 마우스 이벤트로 처리합니다. 다음과 같은 마우스 이벤트가 있습니다. 많지만...
blog.naver.com
2.1
<canvas 태그>
- 웹페이지에서 그래픽적인 것을 그릴 때 사용
- context를 갖고 있는 HTML 요소
- width, heigth를 꼭 설정해줘야 함!!
<canvas의 Context>
- canvas 안에서 픽셀들을 컨트롤함
- getContext(): context 생성(여기서는 2D로 생성)
- strokStyle: 도형의 윤곽선 색을 설정
- lineWidth: 선 두께
const ctx = canvas.getContext("2d"); // 2d로 context 생성
// canvas width, height 지정
canvas.width = 700;
canvas.height = 700;
// 초기 색상, 두께 설정
ctx.storkeStyle = "#2c2c2c"; // 시작색을 첫번째 색으로 지정
ctx.lineWidth = 2.5; // 시작 선두께를 range 기본 값(2.5)로 지정<canvas 선 그리기>
1) moveTo(x, y): 선 그리기 시작 좌표
2) lineTo(x, y): 선 그리기 종료 좌표
3) stroke(): 선 종류 지정
https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage
캔버스(Canvas) 기본 사용법 - Web API | MDN
developer.mozilla.org
2.3
function handleColorClick(event) {
// 버튼 클릭시, 해당 색상으로 변경
ctx.strokeStyle = event.target.style.backgroundColor;
//console.log(event);
}
// 각 색상 버튼 click evnet 설정
Array.from(colors).forEach((color) =>
color.addEventListener("click", handleColorClick)
);
- Array.from(object): object->Array 생성
2.4
※eventListener 추가할 때, 항상 if로 대상 존재 여부 확인하는 것이 좋음!
function handleRangeChange(event) {
// input 들어오면 선 두께 변경
ctx.lineWidth = event.target.value;
//console.log(event.target.value);
}
if (range) {
// range(선 두께) input event 설정
range.addEventListener("input", handleRangeChange);
}
function handleModeClick(event) {
// 버튼 toggle 시키기
if (filling === true) {
// paint 모드로 바꾸고 Fill 버튼으로 바꾸기
filling = false;
mode.innerText = "Fill";
} else {
// Fill 모드로 바꾸고 Paint 버튼으로 바꾸기
filling = true;
mode.innerText = "Paint";
}
}
if (mode) {
// mode click event 설정
mode.addEventListener("click", handleModeClick);
}
2.5
<canvas 채우기>
- fillStyle: 채우기 색
- fillRect(x, y, width, height): (x, y)에서 width, height 만큼 채우기
function handleCanvasClick(event) {
// 캔버스 클릭 시, fill 모드면 해당 색상으로 채우기
if (filling) {
// fillRect(x, y, width, height)
ctx.fillRect(0, 0, canvas.width, canvas.height); // (0, 0)에서 width, height 만큼 색칠
//canvas.style.backgroundColor = ctx.fillStyle;
}
}
2.6
※ canvas는 pixel을 다루기 때문에 기본적으로 image 저장 기능 지원!
<우클릭 방지하기>
1) contextmenu event 설정
2) contextmenu event 발생시, event.preventDefault()로 기본 동작 막기
function handleCM(event) {
// 마우스 우클릭 방지
event.preventDefault();
}
canvas.addEventListener("contextmenu", handleCM); // context 메뉴 실행될 때(우클릭)
<canvas 이미지 저장하기>
1) 이미지 data
- canvas.toDataURL("image/jpeg"): canvas 객체의 toDataURL() 메소드가 그림 데이터를 리턴("data:image/jpeg;base64" 값으로 시작되는 base64 암호화된 데이터 값 )
2) a태그의 href와 download 설정
- a.href = url
- a.download = 다운로드 파일명
function handleSaveClick(event) {
// save 버튼 click시, 이미지 저장
// canvas data를 image로 얻기
const image = canvas.toDataURL("image/jpeg");
const link = document.createElement("a");
link.href = image; // url
link.download = "PaintJS"; // download될 파일 명
//console.log(link);
link.click(); //아무것도 하지 않음
}
'주간 학습 > 주간 학습' 카테고리의 다른 글
| 4주차_210720 (0) | 2021.07.22 |
|---|---|
| html 유용한 단축키 (0) | 2021.07.16 |
| 3주차_210716 (0) | 2021.07.16 |
| 3주차_210715 (0) | 2021.07.16 |
| 3주차_210712) GET&POST, 로그인 구현 방법(쿠키, 세션, JWT) (0) | 2021.07.12 |
