[Canvas-불꽃놀이-12] text 픽셀 데이터 생성

[Canvas-불꽃놀이-12] text 픽셀 데이터 생성

이전 글 : [Canvas-불꽃놀이-11] 불꽃놀이 꼬리 완성 [Canvas-불꽃놀이-11] 불꽃놀이 꼬리 완성이전 글 : [Canvas-불꽃놀이-10] 불꽃놀이 꼬리의 위치와 속도 구현 [Canvas-불꽃놀이-10] 불꽃놀이 꼬리의 위치와 속도 구현이전 글 : [Canvas-불꽃놀이-09] 파티클 관리와 객체 폴링 [Canvas-불꽃놀이-09]jinsk-joy.tistory.com 사용자가 입력한 문자열의 TextData 생성하기1.  문자열의 textData 생성하기앞에서 만들었던 TextData 클래스를 활용하여 파티클을 화면에 그릴 때 필요한 픽셀 데이터를 가져오도록 하겠다. 1-1. textData 가져오기fontSize를 인자를 받아 텍스트를 화면에 그리고 픽셀 데이터를 반환하는 메서드를 생..

  • format_list_bulleted Canvas/불꽃놀이 프로젝트
  • · 2024. 11. 25.
  • textsms
[Canvas-불꽃놀이-11] 불꽃놀이 꼬리 완성

[Canvas-불꽃놀이-11] 불꽃놀이 꼬리 완성

이전 글 : [Canvas-불꽃놀이-10] 불꽃놀이 꼬리의 위치와 속도 구현 [Canvas-불꽃놀이-10] 불꽃놀이 꼬리의 위치와 속도 구현이전 글 : [Canvas-불꽃놀이-09] 파티클 관리와 객체 폴링 [Canvas-불꽃놀이-09] 파티클 관리와 객체 폴링이전 글 : [Canvas-불꽃놀이-08] 애니메이션 기본 틀잡기 [Canvas-불꽃놀이-08] 애니메이션 기본 틀jinsk-joy.tistory.com 불꽃놀이의 꼬리 최종 완성 이전글에서 꼬리의 위치와 속도를 정의했다. 이번 글에선 TailParticle을 생성하고 세부 값들을 조절하여 화면에 어떻게 구현되는지 확인해 보도록 한다.  1. TailParticle 구현TailParticle 클래스는 불꽃놀이의 꼬리를 나타내며, 캔버스 하단에서부터..

  • format_list_bulleted Canvas/불꽃놀이 프로젝트
  • · 2024. 11. 24.
  • textsms
[Canvas-불꽃놀이-10] 불꽃놀이 꼬리의 위치와 속도 구현

[Canvas-불꽃놀이-10] 불꽃놀이 꼬리의 위치와 속도 구현

이전 글 : [Canvas-불꽃놀이-09] 파티클 관리와 객체 폴링 [Canvas-불꽃놀이-09] 파티클 관리와 객체 폴링이전 글 : [Canvas-불꽃놀이-08] 애니메이션 기본 틀잡기 [Canvas-불꽃놀이-08] 애니메이션 기본 틀잡기이전 글 : 2024.11.18 - [개발/Canvas] - [Canvas-불꽃놀이-07] 불꽃놀이 Particle들의 부모 클래스 [Canvas-불jinsk-joy.tistory.com 불꽃놀이 꼬리 구현하기 (x 좌표값들과 속도)이제 기본적인 토대는 다 완성이 되었으므로 세부적인 구현에 들어가고자 한다.먼저 불꽃의 꼬리 구현부터 시작하겠다.꼬리의 개수는 5개이며 중앙에 1개, 왼쪽 2개, 오른쪽 2개에서 미리 정의된 x좌표 배열과 y 속도 배열을 기반으로 생성된다...

  • format_list_bulleted Canvas/불꽃놀이 프로젝트
  • · 2024. 11. 22.
  • textsms
[Canvas-불꽃놀이-08] 애니메이션 기본 틀잡기

[Canvas-불꽃놀이-08] 애니메이션 기본 틀잡기

이전 글 : [Canvas-불꽃놀이-07] 불꽃놀이 Particle들의 부모 클래스 [Canvas-불꽃놀이-07] 불꽃놀이 Particle들의 부모 클래스이전 글 : 2024.11.18 - [개발/Canvas] - [Canvas-불꽃놀이-06] TextData 클래스 [Canvas-불꽃놀이-06] TextData 클래스이전 글 : 2024.11.18 - [개발/Canvas] - [Canvas-불꽃놀이-05] 화면 전환, 입력 이벤트 정의 [Canvas-불jinsk-joy.tistory.com requestAnimationFrame 메서드로 애니메이션 구현하기 1. requestAnimationFrame() : MDN 문서window객체의 메서드인 requestAnimationFrame() 은 브라우저가 ..

  • format_list_bulleted Canvas/불꽃놀이 프로젝트
  • · 2024. 11. 20.
  • textsms
[Canvas-불꽃놀이-07] 불꽃놀이 Particle들의 부모 클래스

[Canvas-불꽃놀이-07] 불꽃놀이 Particle들의 부모 클래스

이전 글 : [Canvas-불꽃놀이-06] TextData 클래스 [Canvas-불꽃놀이-06] TextData 클래스이전 글 : 2024.11.18 - [개발/Canvas] - [Canvas-불꽃놀이-05] 화면 전환, 입력 이벤트 정의 [Canvas-불꽃놀이-05] 화면 전환, 입력 이벤트 정의이전글 : 2024.11.17 - [개발/Canvas] - [Canvas-불꽃놀이-04] Canvas 설정jinsk-joy.tistory.com Particle들의 부모 클래스 생성1. 부모 Particle 클래스를 생성하려는 이유불꽃놀이에 필요한 파티클의 종류를 4가지로 결정했다.TailParticle : 불꽃놀이의 꼬리 부분을 표현하는 파티클SparkParticle : 불꽃놀이 잔상 효과를 표현하는 파티클T..

  • format_list_bulleted Canvas/불꽃놀이 프로젝트
  • · 2024. 11. 18.
  • textsms
[Canvas-불꽃놀이-05] index.js에서 중요 이벤트 정의

[Canvas-불꽃놀이-05] index.js에서 중요 이벤트 정의

이전글 : [Canvas-불꽃놀이-04] Canvas 설정 - 물리적 크기와 CSS 크기 [Canvas-불꽃놀이-04] Canvas 설정 - 물리적 크기와 CSS 크기이전 글 : 2024.11.16 - [개발/Canvas] - [Canvas-불꽃놀이-03] Canvas 설정하기 [Canvas-불꽃놀이-03] Canvas 설정하기이전글 : 2024.11.15 - [개발/Canvas] - [Canvas-불꽃놀이-02] UI 구성 [Canvas-불꽃놀이-02] UI 구성이전jinsk-joy.tistory.com 중요 이벤트 정의 (화면 전환, 리사이즈, 입력)1. 이벤트 전달을 index.js에 캔버스 객체 생성하기const canvas = new Canvas(); 2. 화면 전환 (MDN-hashchange..

  • format_list_bulleted Canvas/불꽃놀이 프로젝트
  • · 2024. 11. 18.
  • textsms