canvas에서 스크롤 값을 이용하려면 어떻게 해야하나요?
1223
작성한 질문수 61
만약 canvas에서 스크롤 값에 따라 무언가를 움직이거나 나타나게 하려면 어떻게 해야하나요??
답변 1
0
스크롤 이벤트는 독립적이기 때문에, 일반 html 엘리먼트를 컨트롤 하든 canvas에서 하든 똑같습니다.
그치만 canvas는 그림을 그리는 방식이 전혀 다르기 때문에, 사용법을 따로 공부하셔야 하는거지요~
일반 html 엘리먼트에서는 CSS의 값을 조정한다고 하면, canvas에서는 해당 드로잉 메서드의 좌표 부분에 그 값을 넣어주는 식입니다.
context.fillRect(0, 0, 500, 500);
예를 들어 이 코드는 500 크기의 정사각형을 0, 0 위치에 그려주는 것인데, 이런 부분에 스크롤을 통해 계산된 값을 넣어주는 식으로 그려주는 거지요.
캔버스 사용법 자체를 공부하고 싶으시면 아래 링크를 참고해보세요~ 제가 예전에 유튜브 라이브로 진행한 캔버스 기초 강의입니다.
https://www.youtube.com/watch?v=JFQOgt5DMBY&list=PLe9WXHRkq9p2Yl0z2zskv-FhP5sinISTc
왼쪽/오른쪽 동작시 딜레이 문제
0
111
1
변수 범위 관련 질문
0
122
1
perspective 문의
0
114
1
생성자 함수를 클래스 함수로 변경 하고 this 오류 관련
0
167
1
스크롤이 중간 위치에 있을 때 창의 크기를 변환하면 생기는 문제
0
133
1
animation이벤트 질문이요!
0
82
1
resize handler에서 질문이 있습니다.
0
120
1
카드 뒤집힐 때 F가 보인 이유
0
161
1
3d 뒤집기 추가효과
0
225
1
전진! 3D 스크롤 21 강의 질문
1
182
1
eventlistener 질문
0
160
1
zMove 를 1000으로 설정하는 이유에 대하여.
0
179
1
[정보-23강] ES6 class 문법으로 공부하시는 분들!! 화살표 함수로도 시도해보셔요!
1
206
1
동적으로 html 생성 후 이벤트 위임 질문 있습니다.
0
280
1
rotateY()에서 deg에 따른 차이
0
205
1
코드 작성 순서
0
285
1
이미지가 없는데 첨부파일을 다운 받는 방법이 있나요??
1
404
1
'이벤트 위임 보강 영상'에 있는 예제 html이 안 보입니다
0
285
2
섹션5 자바스크립트 이벤트 다루기 질문
1
263
1
[#전진! 3D 스크롤 11] mousePos 공식 질문 있습니다!
0
434
2
css 는 직접 작성을 해야하는걸까용?
0
332
1
translateZ 에 px 이 아닌 vw 로 값을 주신 이유가 있을가요?
0
368
2
house 부분에도 width , height 부분을 꽉 차게 주신 부분이 제가 이해한게 맞는지 궁금합니다.
0
312
2
left:-400vw 가 아닌 translateZ(100vw); 을 입력하신 이유가 궁금합니다.
0
314
2