주간 학습/주간 학습

3주차_210714

HSY_mumu 2021. 7. 14. 23:49
728x90

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

HTML 엘리먼트를 살펴보는 것으로 이 튜토리얼을 시작해 보겠습니다. 이 페이지의 끝에서 캔버스 2D 컨텍스트를 설정하는 방법을 알게되고, 여러분의 브라우저에서 첫 번째 예제를 그리

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(); //아무것도 하지 않음
}

 

728x90