컴퓨터 알아가기/JavaScript
-
JavaScript 입문 : Canvas 이론 정리 - Canvas 기본 구조 및 사이즈 설정에 대한 이해컴퓨터 알아가기/JavaScript 2022. 11. 16. 19:30
Canvas 에 대한 이론 정리를 하고 있습니다. 내 브라우저가 Canavs를 지원하는지에 대하여 Modernizr의 기능을 활용하여 알아 보았구요. 조금 더 기초를 다져보도록 하갰습니다. 이 글은 '1분코딩의 HTML5 Canvas 라이브 강좌'를 기본으로 공부하고 있습니다. 1. Canvas 기본 구조 태그에 id를 지정해서 할 수 있지만 이는 클래스명을 지정해서 할 수도 있다는 말입니다. 또한 캔버스 자체 역시 색이 없기 때문에 약간의 색(#eee)을 넣어주는 것이 좋구요. 그리고 지정된 캔버스 태그를 선택하고 getContext로 연결해 주는 것이 기본이지요. 다음 태그안에 필요한 기본 구조입니다. 태그에 색 #eee를 지정하고 브라우저를 보면 캔버스의 기본 크기는 300 X 150 입니다. 이 ..
-
JavaScript 입문 : Canvas 이론 정리 - 모던나이저 사용방법 및 Canvas 지원 브라우저 확인컴퓨터 알아가기/JavaScript 2022. 11. 14. 19:30
Canvas에 대해 어느정도 공부를 하고 내용을 파악해 보았지만 하나의 매뉴얼로 일목요연하게 정리를 해 보고 싶어 졌습니다. 물론 구체적으로 공부할 내용은 엄청 많지만.. 간단히 순서를 정리한 강좌를 기본으로 기초부분에서 놓친 부분이 없나 확인도 할겸 정리를 해보고자 합니다. 관련 내용은 '1분코딩 HTML5 Canvas 라이브 강좌'를 기본으로 정리 하였습니다. 1. Canvas 이론 하나하나 세밀히 공부하고자 하는 분은 Canvas MDN을 링크합니다. 대부분의 강좌도 이것을 베이스로 하더군요. Canvas API - Web API | MDN (mozilla.org) Canvas API - Web API | MDN Canvas API는 JavaScript와 HTML 엘리먼트를 통해 그래픽을 그리기위한..
-
JavaScript 입문 : Canvas Animation VI - hue를 통한 무지개 색상으로 마우스 이동시마다 애니메이션 발생컴퓨터 알아가기/JavaScript 2022. 11. 12. 19:30
Canvas를 활용한 애니메이션 6번째 시간입니다. 이제는 다양한 색상을 통하여 마우스이벤트가 발생할 때 마다 아름다운 무지개 꼬리가 따라다니는 과정을 공부하겠습니다. 역시 Animation 학습은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부하고 있습니다. 우선 원의 색을 하얀색으로 바꾸어 봅니다. draw( ) 함수에서 적용하면 되겠죠. 1. Color Hue 설정 컬러를 나타내는 방법은 여러가지가 있습니다. RGB숫자와 Hex 코드로 구분하거나 직접 컬러이름을 기입하는 방식으로 지금껏 사용했었는데 Hue 컬러도 있습니다. 간단히 말해 표준 색상을 0도부터 360도까지 표현할 수 있습니다. Hue 컬러를 마우스를 클릭하거나 움직일때 형성되는 입자에 반..
-
JavaScript 입문 : Canvas Animation V - 다양한 사이즈 원 만들고 크기 줄어 들게 만들어서 클릭 이벤트에 연결하기컴퓨터 알아가기/JavaScript 2022. 11. 11. 19:30
지난시간까지 캔버스위 같은 사이즈 (반지름 50)의 초록색 원이 100개 생겼다가 사라지는 효과까지 공부를 해 보았습니다. 이어서 좀 더 효과를 주면서 좀 더 어렵지만 멋있는 애니메이션에 도전을 하고자 합니다. 역시 Animation 학습은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부하고 있습니다. 1. 다양한 사이즈 원 만들기 랜덤 사이즈로 만들기 위한 작업은 constructor에서 이미 랜덤 설정을 해 놓았습니다. 원을 그리는 함수에서 반지름이 50으로 되어 있는 부분을 constructor의 내용으로 바꾸어 줍니다. 화면을 보면 1 ~ 6 사이즈의 100개 원이 보입니다. 즉, 사이즈를 수정하고자 하면 constructor를 수정하면 되겠네요. ..
-
JavaScript 입문 : Canvas Animation IV - 클래스 이용 여러 객체 만들고 버블 애니메이션 적용하기컴퓨터 알아가기/JavaScript 2022. 11. 10. 19:30
지난 시간까지 마우스를 따라 다니는 원을 만들어 보았습니다. 지난 시간의 코드를 계속 업데이트 하면서 공부를 진행하고 있기 때문에 반드시 1편부터 개념을 익히고 와야합니다. 복습을 해 보자면 캔버스의 속성을 이해하고 사각형과 원을 그리는 방법을 배웠습니다. 다양한 애니메이션 기법을 응용하기 위하여 캔버스 좌표를 연결하는 법을 배웠고 이를 위하여 PointerEvent와 MouseEvent를 활용하였습니다. 응용된 효과를 위하여 이제는 다양한 사이즈의 원을 생성해 내고 애니메이션 효과를 보도록 하겠습니다. 역시 Animation 학습은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부하고 있습니다. 1. 클래스 이용 다양한 사이즈 원 만들기 하나의 코드에서 비..
-
JavaScript 입문 : Canvas Animation III - 마우스를 따라 다니는 원 만들기컴퓨터 알아가기/JavaScript 2022. 11. 9. 19:30
지난 시간 캔버스 클릭이벤트를 활용하여 마우스 클릭마다 캔버스 위에 원을 만들어 보았습니다. 이는 캔버스내 좌표를 읽어내는 방식을 응용한 것으로 좀 더 다양하게 응용이 가능합니다. 한번 이 원이 마우스가 움직일때마다 따라다니는 코드를 공부해 보고자 합니다. 역시 Animation 학습은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부합니다. 지난 시간 다음 그림과 같이 마우스 클릭마다 원을 생성해 보았습니다. 1. 마우스 움직이는 이벤트 (mousemove 이벤트) 이제는 마우스를 움직일때 원이 따라 다니는 코드를 만들 건데요. 그러기 위해서는 mousemove이벤트를 활용해야 합니다. 다음과 같이 작성하고 콘솔을 확인해 보도록 하겠습니다. 위 콘솔을 보게..
-
JavaScript 입문 : Canvas Animation II - 클릭이벤트(PointerEvent)를 이용하여 원 찍어내기컴퓨터 알아가기/JavaScript 2022. 11. 8. 19:30
Canvas Animation 2번째 시간입니다. 지난 시간 초록색 원을 그려 보았고 이제는 마우스 클릭 이벤트를 이용하여 클릭때마다 원을 만들어 볼 예정입니다. 이미 설명 하였듯이 이렇게 미리 만들어 놓은 프로그램(라이브러리)을 이용하는 것이 아니라 순수하게 자바스크립트 언어만으로 결과를 만들어 내는 것을 특히 '바닐라 자바스크립트'라고 불립니다. 역시 Animation 학습은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부합니다. 1. 원 만들기 기본 지난 시간 초록색 원을 만든 전체 코드는 다음과 같습니다. 2. 클릭하면 원 만들어지기 지금부터는 함수를 이용하여 Canvas내 원을 만들고 각 좌표를 확인하는 방법을 공부할 차례입니다. 먼저 위 코드에서..
-
JavaScript 입문 : Canvas Animation I - Canvas 기본속성 이해와 사각형 및 원 만들기컴퓨터 알아가기/JavaScript 2022. 11. 7. 19:30
Canvas 기본에 대해 공부하고 있습니다. 물론 어려운 영역은 아주 어렵겠지요. 기본적으로 Canvas를 만들어 보면서 재미는 느끼고 있습니다. 자바스크립트에서 알아야 될 기본사항 정도만 이곳 저곳 강좌를 보면서 공부하면서 정리해 놓고자 합니다. 그런데 지금부터 공부할 내용은 사실 기초와 기본을 띄어 넘는 느낌이 듭니다. 어떻게든 최종 결과물까지 만들어 보고자 합니다. 화면에서 무지개 색깔이 퍼지는게 너무 보기 좋아서 이런 것을 한번 만들어 보고 싶다는 생각을 가지게 되었네요. 본 Canvas 내역은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부 하였습니다. 이 분은 애니메이션 관련 대단한 개발자인 듯 합니다. 최종 목표는 아래 그림처럼 마우스를 움직이..