자바스크립트Canvas
-
JavaScript 입문 : Canvas 이론 정리 - 이미지 적용하기 drawImage(변수, x거리, y거리)컴퓨터 알아가기/JavaScript 2022. 11. 24. 19:30
Canvas에 대한 이론을 정리하면서 일반적으로 도형을 직접 그려서 사용하는 것 보다 이미지 퍼일을 이용하여 그림을 나타낸다든지 또는 애니메이션 기능을 사용하는 경우가 훨씬 더 많다고 합니다. 이를 위해서 이미지를 직접 대입하는 원리를 공부해 보고자 합니다. 역시 본 내용은 '1분코딩의 HTML5 Canvas 라이브강좌'를 기본으로 공부하고 있습니다. 1. 이미지 객체 만들기 캔버스 기본구조를 설정하고 이미지 객체를 자바스크립트에서 만듭니다. 이미지 객체를 만드는 방법은 createElement( ) 메소드를 이용할 수도 있고 new Image( ) 메소드를 이용할 수도 있습니다. 캔버스 위에 나타낼 무료이미지를 준비하여 다음과 같이 연결시킵니다. 2. 이미지 로드(Load)하기 이미지를 캔버스에 나타내..
-
JavaScript 입문 : Canvas 이론 정리 - 애니메이션 (RequestAnimationFrame : x축으로 공 움직이기)컴퓨터 알아가기/JavaScript 2022. 11. 19. 19:30
Canvas에서 놓친 이론에 대하여 항목별로 정리를 하고 있습니다. 그리기 기능을 통하여 셀프체크로 별모양과 스마일 모양을 만들어 보았습니다. 다양한 그림을 스스로 그려본다는 것은 그냥 이론만 공부하는 것 보다는 아무래도 머리속에 자신만의 방법을 익히기에 좋은 것 같습니다. 이제 본격적으로 Animation 에 대해 기본 이론을 정립하고자 합니다. 본 내용은 '1분코딩 HTML5 Canvas 라이브강좌'를 기본으로 하고 있습니다. ▒ ReaquestAnimationFrame( ) 자바스크립트에서 애니메이션을 나타내는 기본적인 방법으로는 requestAnimationFrame( )메소드와 setInterval( )메소드를 활용하는 방법이 있습니다. 두 단어에서 느낄 수 있듯이 첫번째는 프레임을 조정하는 것..
-
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 VII - 입자를 추가하여 둘 사이 거리를 선으로 이어주는 효과로 애니메이션 완성카테고리 없음 2022. 11. 13. 19:30
이제 Canvas를 통한 Animation 기본 시간이 끝나갑니다. Canvas를 공부하면서 기본적인 속성에 대해 알아가는 시간이었던 것 같습니다. 물론 훨씬 복잡하고 어려운 코드가 많으나 최초 목적인 기초 단계의 Canvas 속성을 아는 것만으로도 성과가 있을 것으로 보여집니다. 이제 조금 더 들어가서 현재는 100개의 입자를 생성하여 애니메이션 효과를 보았는데 이중반복을 통해 두입자 사이의 거리를 계산하고 그 거리를 선으로 잇는 효과를 적용한다면 상당히 아름다운 효과를 표현할 수 있을겁니다. 역시 Animation 학습은 'Franks laboratory의 Master HTML Canvas 2021'을 기본으로 공부하고 있습니다. 1. 입자 사이 거리 계산식 추론 입자를 하나 더 만들어 입자사이를 계..
-
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. 클래스 이용 다양한 사이즈 원 만들기 하나의 코드에서 비..