[1일1js] 그래픽 그리기#5
간단한 그리기 응용 프로그램
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를 다시 작동시키니 루프처럼 계속 돌아가고 있는셈
Author And Source
이 문제에 관하여([1일1js] 그래픽 그리기#5), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@2taesung/1일1js-그래픽-그리기5저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)