[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

[canvas] rotate() 메서드

canvas의 rotate() 메서드에 대해 MDN을 참고하여 공부해보았다. CanvasRenderingContext2D.rotate(angle)회전하고 싶은 각도를 입력하면 캔버스의 원점을 기준으로 캔버스의 x, y축이 입력한 angle 값으로 회전한다파라미터로 전달할 회전하고 싶은 각도는 호도법으로 변환하여 라디안으로 입력해야 한다.캔버스의 회전은 원점을 기준으로 이루어 지기 때문에 translate() 메서드로 원점을 변경한 후 rotate() 메서드를 실행하면 수정된 원점을 기준으로 캔버스의 x, y축이 회전된다.context.rotate(회전각도 * Math.PI / 180); // 호도법으로 변환 필수! 예제const canvas = document.querySelector("canvas");..

• format_list_bulleted Canvas
• · 2024. 3. 13.
• textsms

[canvas] canvas 크기 설정과 비율 맞추기

canvas 태그의 크기를 어떻게 맞추는 것이 좋을까?** 공통적으로 확인하기위에 검은 바탕의 canvas에 (10, 10) 위치에 10*10 크기의 흰색 정사각형을 생성한다.  최초 생성html파일에 canvas 태그만 생성하고 조정은 js파일에서 진행함canvas 자체의 크기와 canvas css의 크기는 width 300, height 150이다const canvas = document.querySelector('canvas');const ctx = canvas.getContext('2d');ctx.fillStyle = 'white';ctx.fillRect(10, 10, 20, 20); 자, 이제 화면 크기를 조정해보자 1. canvas 자체의 크기만 변경canvas 자체의 크기를 width 600..

• format_list_bulleted Canvas
• · 2024. 1. 11.
• textsms