강의

멘토링

커뮤니티

인프런 커뮤니티 질문&답변

이종민님의 프로필 이미지
이종민

작성한 질문수

인터랙티브 웹 개발 제대로 시작하기

스크롤 이벤트 다루기

canvas에서 스크롤 값을 이용하려면 어떻게 해야하나요?

작성

·

1.2K

0

만약 canvas에서 스크롤 값에 따라 무언가를 움직이거나 나타나게 하려면 어떻게 해야하나요??

답변 1

0

1분코딩님의 프로필 이미지
1분코딩
지식공유자

스크롤 이벤트는 독립적이기 때문에, 일반 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

이종민님의 프로필 이미지
이종민

작성한 질문수

질문하기