[Canvas-불꽃놀이-04] Canvas 설정 - 물리적 크기와 CSS 크기

이전 글 : [Canvas-불꽃놀이-03] Canvas 설정하기 [Canvas-불꽃놀이-03] Canvas 설정하기이전글 : 2024.11.15 - [개발/Canvas] - [Canvas-불꽃놀이-02] UI 구성 [Canvas-불꽃놀이-02] UI 구성이전 글 : 2024.11.15 - [개발/Canvas] - [Canvas-불꽃놀이-01] 프로젝트 초기화 [Canvas-불꽃놀이-01] 프로젝트 초기화jinsk-joy.tistory.com 물리적 크기와 CSS 크기 설정을 통한 캔버스 해상도 조절참고 : Optimizing Canvas1. 해상도13인치의 화면이 있는데 같은 크기의 화면이라도 고해상도 화면은 저해상도 화면보다 픽셀수가 많다예를 들어 1920*1080 해상도의 13인치 화면보다 3840*..

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

[Canvas-불꽃놀이-03] Canvas 설정하기

이전글 : [Canvas-불꽃놀이-02] UI 구성 [Canvas-불꽃놀이-02] UI 구성이전 글 : 2024.11.15 - [개발/Canvas] - [Canvas-불꽃놀이-01] 프로젝트 초기화 [Canvas-불꽃놀이-01] 프로젝트 초기화글자를 입력하면 불꽃놀이처럼 빵빵 터지는 효과를 만들어보고 싶어져서 시작하게 되jinsk-joy.tistory.com 캔버스 기본 세팅1. 캔버스 설정하기대략적인 UI 구성이 완료되어 canvas를 설정하고자 한다.Canvas Class : 캔버스에 그림을 그리는 로직, 애니메이션, 파티클 생성을 담당해 화면에 실제로 그리는 핵심 로직을 담당CanvasOption Class : 캔버스의 ctx, 크기, 색상, 폰트, 해상도 등 기본 옵션을 정의하고 관리이렇게 옵션 ..

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

[Canvas-불꽃놀이-02] UI 구성

이전 글 : [Canvas-불꽃놀이-01] 프로젝트 초기화 [Canvas-불꽃놀이-01] 프로젝트 초기화글자를 입력하면 불꽃놀이처럼 빵빵 터지는 효과를 만들어보고 싶어져서 시작하게 되었다.빌드 도구로는 빠르고 비교적 설정하기가 간편한 Vite을 선택하였다.  1. github repository 생성https://githubjinsk-joy.tistory.com 화면 html, css 구성1. 화면 UI 구성하기글자를 입력한 후 불꽃놀이처럼 터지게 하는 효과를 만들기 위해 크게 두 가지의 화면으로 구성하였다구성 : 홈 (입력화면) / 캔버스 (불꽃놀이 효과)배경 : 우주느낌을 주고 싶어서 배경색을 검은색으로 설정하였다.안내 문구 : 안내문구에 애니메이션을 적용해 사용자들이 쉽게 인식할 수 있도록 유도하였..

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

[Canvas-불꽃놀이-01] 프로젝트 초기화

글자를 입력하면 불꽃놀이처럼 빵빵 터지는 효과를 만들어보고 싶어져서 시작하게 되었다.빌드 도구로는 빠르고 비교적 설정하기가 간편한 Vite을 선택하였다.  1. github repository 생성https://github.com/jinsk9268/text-fireworks GitHub - jinsk9268/text-fireworksContribute to jinsk9268/text-fireworks development by creating an account on GitHub.github.com 2. Vite 프로젝트 생성난 자동화로 진행하였다. 터미널에서 아래와 같이 명령어를 입력하면npm create vite@latest 프로젝트명 Vite 프로젝트가 생성이 되는데 바닐라 자바스크립트로 할거라 f..

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