> Frontend/Canvas
-
TIL-2024.04.23 - Canvas - 005 - Canvas 애니메이션 & 이벤트> Frontend/Canvas 2024. 4. 23. 18:26
질문: 1. Canvas 에서 애니메이션 활용하는 방법 2. Canvas 에서 이벤트 사용하는 방법 애니메이션: requestAnimationFrame 활용하기, 기본적인 애니메이션 구현 1. requestAnimationFrame 활용하기 - requestAnimationFrame()은 애니메이션을 수행하고자 할 때 다음 리페인트를 실행하기 전에 애니메이션을 업데이트하는 메서드 - requestAnimationFrame()을 사용하면 브라우저의 최적화된 타이밍에 애니메이션을 실행. function animate() { // 애니메이션 코드 작성 // Canvas 요소 업데이트 requestAnimationFrame(animate); // 다음 프레임 요청 } // 애니메이션 시작 animate(); -..
-
TIL-2024.04.22 - Canvas - 004 - Canvas 텍스트 & 이미지> Frontend/Canvas 2024. 4. 22. 18:48
질문: 1. Canvas 에서 텍스트와 이미지는 어떻게 표현할 수 있어 ? 텍스트 처리: 텍스트 그리기, 텍스트 스타일링과 폰트 설정 - Canvas를 사용하여 텍스트를 그리고 스타일링하는 방법 1. 텍스트 그리기 const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 텍스트 그리기 ctx.font = '24px Arial'; // 폰트 설정 ctx.fillStyle = 'white'; // 텍스트 색상 설정 ctx.fillText('Hello, Canvas!', 50, 50); // (텍스트, x, y) - 위 코드에서 font 속성을 사용하여 텍스트의 폰트와 크기를 설정 - fillStyle ..
-
TIL-2024.04.21 - Canvas - 003 - Canvas 곡선 그리기> Frontend/Canvas 2024. 4. 21. 23:29
질문 1. Canvas에서 곡선은 어떻게 그릴 수있어 ? 경로(Path) 그리기 - Canvas에서는 경로(Path)를 사용하여 여러 도형을 그리고, 곡선을 그림 - Canvas에서 경로(Path)를 그리는 과정은 > beginPath() : 새로운 경로(path)를 시작할 때 호출하는 메서드 > 그리기 명령(moveTo(), lineTo(), arc(), quadraticCurveTo(), bezierCurveTo() 등) > 그리기 스타일 설정(stroke() 또는 fill()) 의 순서로 이뤄짐. 예제: const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // 경로 그리기 시작 ctx.begi..
-
TIL-2024.04.20 - Canvas - 002 - Canvas 그리기> Frontend/Canvas 2024. 4. 21. 23:16
질문: 1. Canvas에서 그리기를 어떻게 구현할 수 있어 ? Canvas 엘리먼트 생성하기: - Canvas 엘리먼트를 생성하고 JavaScript를 사용하여 그래픽을 그리는 방법 > canvas 엘리먼트를 생성하고, id 속성을 통해 이 엘리먼트를 JavaScript에서 식별 Context(컨텍스트)와 그리기 명령: - Canvas는 그리기 명령을 처리하기 위해 2D 그래픽 컨텍스트를 제공 JavaScript로 Canvas 컨텍스트 const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); 그리기 명령 사용 // 사각형 그리기 ctx.fillStyle = 'red'; // 색상 설정 ctx.fillR..
-
TIL-2024.04.19 - Canvas - 001 - Canvas 기초> Frontend/Canvas 2024. 4. 20. 19:02
질문: 1. Canvas가 무엇이야 ? Canvas: 정의: - JavaScript와 HTML을 사용하여 그래픽을 그릴 수 있는 HTML 요소. - Canvas는 그림을 그리고 그림을 조작하는 기능을 제공하며, Web App 에서 동적인 그래픽 및 애니메이션을 생성 가능한 도구 예제: 예제 결과: 실제 사용 예시: ... 생략 ... ... 생략 ... const fnDrawImageOnCanvas = img => { const ctx = imgCanvas.value.getContext("2d"); const image = new Image(); image.src = img?.fileUrl; // URL of the image image.onload = () => { ctx.drawImage(image,..