[1일1js] 그래픽 그리기#5

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics#loops_and_animations

간단한 그리기 응용 프로그램

1. aria-label이란?

ARIA는 HTML요소에 접근 가능한 설명용 텍스트를 넣을 수 있다. 그 방법이 바로 ARIA의 속성 중 label과 관련된 속성을 사용하는 것이다. aria-labelledby는 화면에 현재 요소를 설명할 텍스트가 있을 경우에 해당 텍스트 영역과 현재 요소를 연결할 때 사용한다

https://abcdqbbq.tistory.com/77

=> 어떤 이미지인지 텍스트로 설명할 수 있는 요소

2. input type

    <div class="toolbar">
      <input type="color" aria-label="select pen color">
      <input type="range" min="2" max="50" value="30" aria-label="select pen size"><span class="output">30</span>
      <button>Clear canvas</button>
    </div>

=> input태그의 type을 color, range로 지정해주는 것만으로도 다른 이벤트 효과를 가져올 수 있다.

      const colorPicker = document.querySelector('input[type="color"]');
      const sizePicker = document.querySelector('input[type="range"]');

=> 와 나는 처음에 얘네들을 어떻게 select하지 싶었는데 input[type="color"]로 특정지어서 잡아올수있구만

      sizePicker.oninput = function() {
        output.textContent = sizePicker.value;
      }

=> helngers 프로젝트를 진행할때 이벤트에 따른 데이터의 변화를 고민했던 적이 있는데(컴포넌트사이에) js로 쉽게 가능 다시 한번 확인

3. x, y, press

      // store mouse pointer coordinates, and whether the button is pressed
      let curX;
      let curY;
      let pressed = false;

=> 마우스의 추적이 가능하도록 된 변수를 설정한다.

document.onmousemove = function(e) {
  curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
  curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
}

=> 마우스가 움직이면 x및 y값을 캡쳐하는 이벤트 핸들러로 설정된 함수 실행

4. 그리기 루프

function draw() {
  if(pressed) {
    ctx.fillStyle = colorPicker.value;
    ctx.beginPath();
    ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false);
    ctx.fill();
  }

  requestAnimationFrame(draw);
}

draw();

=> 아 지금까지 뭔가 그리기 루프에 대한 느낌이 확 와닿지 않았는데
=> 이렇게 보니까 딱 와닿네 draw함수가 실행되면 끝에 draw를 다시 작동시키니 루프처럼 계속 돌아가고 있는셈