clearRect()
-
JavaScript 입문 : Canvas 이론 정리 - 그리기 (사각형, 선, 원, 별, 스마일)컴퓨터 알아가기/JavaScript 2022. 11. 18. 19:30
캔버스 지원 브라우저와 캔버스 크기 설정에 대해 공부를 해 보았는데 브라우저는 최근에는 대부분 지원이 가능하지만 유저들을 위해 지원여부를 감지하고 표시해 주는 Modernizr 에 대해 확인을 해 보았구요. 크기 설정은 캔버스 자체를 브라우저의 2배로 설정하여 작업하고 CSS에서 100%로 맞추어 주면 고해상도를 나타낼 수 있다고 배웠습니다. 이제는 간단히 그려지는 도형에 대해 기본 순서를 정리해 보겠습니다. 역시 본 내용은 '1분코딩 HTML5 Canvas 라이브 강좌'를 기본으로 하고 있습니다. 1. 사각형 그리기 기본적으로 600 X 400의 캔버스 크기를 만들고 시작 하겠습니다. 도형에 색을 지정하지 않으면 기본색은 검은색입니다. 상기 그림을 정리하면 fillRect는 사각형을 채우는 것이고 fi..
-
JavaScript 입문 : Canvas Animation III - 마우스를 따라 다니는 원 만들기컴퓨터 알아가기/JavaScript 2022. 11. 9. 19:30
지난 시간 캔버스 클릭이벤트를 활용하여 마우스 클릭마다 캔버스 위에 원을 만들어 보았습니다. 이는 캔버스내 좌표를 읽어내는 방식을 응용한 것으로 좀 더 다양하게 응용이 가능합니다. 한번 이 원이 마우스가 움직일때마다 따라다니는 코드를 공부해 보고자 합니다. 역시 Animation 학습은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부합니다. 지난 시간 다음 그림과 같이 마우스 클릭마다 원을 생성해 보았습니다. 1. 마우스 움직이는 이벤트 (mousemove 이벤트) 이제는 마우스를 움직일때 원이 따라 다니는 코드를 만들 건데요. 그러기 위해서는 mousemove이벤트를 활용해야 합니다. 다음과 같이 작성하고 콘솔을 확인해 보도록 하겠습니다. 위 콘솔을 보게..