arc()
-
JavaScript 입문 : Canvas 이론 정리 - 그리기 (사각형, 선, 원, 별, 스마일)컴퓨터 알아가기/JavaScript 2022. 11. 18. 19:30
캔버스 지원 브라우저와 캔버스 크기 설정에 대해 공부를 해 보았는데 브라우저는 최근에는 대부분 지원이 가능하지만 유저들을 위해 지원여부를 감지하고 표시해 주는 Modernizr 에 대해 확인을 해 보았구요. 크기 설정은 캔버스 자체를 브라우저의 2배로 설정하여 작업하고 CSS에서 100%로 맞추어 주면 고해상도를 나타낼 수 있다고 배웠습니다. 이제는 간단히 그려지는 도형에 대해 기본 순서를 정리해 보겠습니다. 역시 본 내용은 '1분코딩 HTML5 Canvas 라이브 강좌'를 기본으로 하고 있습니다. 1. 사각형 그리기 기본적으로 600 X 400의 캔버스 크기를 만들고 시작 하겠습니다. 도형에 색을 지정하지 않으면 기본색은 검은색입니다. 상기 그림을 정리하면 fillRect는 사각형을 채우는 것이고 fi..
-
JavaScript 입문 : Canvas Animation I - Canvas 기본속성 이해와 사각형 및 원 만들기컴퓨터 알아가기/JavaScript 2022. 11. 7. 19:30
Canvas 기본에 대해 공부하고 있습니다. 물론 어려운 영역은 아주 어렵겠지요. 기본적으로 Canvas를 만들어 보면서 재미는 느끼고 있습니다. 자바스크립트에서 알아야 될 기본사항 정도만 이곳 저곳 강좌를 보면서 공부하면서 정리해 놓고자 합니다. 그런데 지금부터 공부할 내용은 사실 기초와 기본을 띄어 넘는 느낌이 듭니다. 어떻게든 최종 결과물까지 만들어 보고자 합니다. 화면에서 무지개 색깔이 퍼지는게 너무 보기 좋아서 이런 것을 한번 만들어 보고 싶다는 생각을 가지게 되었네요. 본 Canvas 내역은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부 하였습니다. 이 분은 애니메이션 관련 대단한 개발자인 듯 합니다. 최종 목표는 아래 그림처럼 마우스를 움직이..