Canvas

2024.05.24 - [Canvas] - [Canvas] 보일러 플레이트 작성 (캔버스 클래스) [Canvas] 보일러 플레이트 작성 (캔버스 클래스)index.js  CanvasOption.jsexport default class canvasOption { constructor() { this.canvas = document.querySelector('canvas') this.ctx = this.canvas.getContext('2d') this.dpr = window.devicePixelRatio this.fps = 60 this.interval = 1000 / this.fps this.canvagamzaggang7.tistory.com 1. 파티클 생성js 폴더 내에 Particle.js 을 만들..

index.js  CanvasOption.jsexport default class canvasOption { constructor() { this.canvas = document.querySelector('canvas') this.ctx = this.canvas.getContext('2d') this.dpr = window.devicePixelRatio this.fps = 60 this.interval = 1000 / this.fps this.canvasWidth = innerWidth this.canvasHeight = innerHeight }}  index.jsimport canvasOption from "./CanvasOption.js"class Canva..

2024.05.22 - [Canvas] - [Canvas] dat.GUI 사용하기 [Canvas] dat.GUI 사용하기2024.05.21 - [Canvas] - [Canvas] svg 필터 입히기(feGaussianBlur, feColorMatrix) | Gooey Effect [Canvas] svg 필터 입히기(feGaussianBlur, feColorMatrix) | Gooey Effect2024.05.20 - [Canvas] - [Canvas] 파티클 그리기 | 애니메이션 추가(regamzaggang7.tistory.com 현재 캔버스는 화면의 크기를 변경해도 바뀌지 않는다. 처음 js가 로드되었을 때const canvasWidth = innerWidthconst canvasHeight = inn..

2024.05.21 - [Canvas] - [Canvas] svg 필터 입히기(feGaussianBlur, feColorMatrix) | Gooey Effect [Canvas] svg 필터 입히기(feGaussianBlur, feColorMatrix) | Gooey Effect2024.05.20 - [Canvas] - [Canvas] 파티클 그리기 | 애니메이션 추가(requestAnimationFrame) [Canvas] 파티클 그리기 | 애니메이션 추가(requestAnimationFrame)* 현재 js 코드 *const ctx = canvas.getContext('2d')const dpr = widdow.devigamzaggang7.tistory.com dat.GUI는 js 라이브러리로, 웹 애플..

2024.05.20 - [Canvas] - [Canvas] 파티클 그리기 | 애니메이션 추가(requestAnimationFrame) [Canvas] 파티클 그리기 | 애니메이션 추가(requestAnimationFrame)* 현재 js 코드 *const ctx = canvas.getContext('2d')const dpr = widdow.devicePixelRatioconst canvasWidth = 300const canvasHeight = 300canvas.style.width = canvasWidth + 'px'canvas.style.height = canvasHeight + 'px'canvas.width = canvasWidth * dprcanvas.gamzaggang7.tistory.com *..

* 현재 js 코드 *const ctx = canvas.getContext('2d')const dpr = widdow.devicePixelRatioconst canvasWidth = 300const canvasHeight = 300canvas.style.width = canvasWidth + 'px'canvas.style.height = canvasHeight + 'px'canvas.width = canvasWidth * dprcanvas.height = canvasHeight * dprctx.scale(dpr, dpr)  이번엔 파티클을 그리기 위해 arc 메서드를 사용한다.먼저 ctx.beginPath()로 Path를 그릴 것을 선언한다.ctx.beginPath()ctx.arc()로 원을 그린다. h..

2024.04.14 - [Canvas] - [Canvas] 캔버스 사용하기 | 캔버스 사이즈 | fillRect() Canvas Particle " data-og-host="gamzaggang7.tistory.com" data-og-source-url="https://gamzaggang7.tistory.com/105" data-og-url="https://gamzaggang7.tistory.com/105" data-og-image="https://scrap.kakaocdn.net/dn/bAtaiG/hyVS9eIzd3/b7BfVQj5AvE9HKBu7kyggk/img.png?width=800&height=349&face=0_0_800_349,https://scrap.kakaocdn.net/dn/bN1xHy/..

캔버스를 사용하기 위해 index.html을 생성하고 body 태그 안에 canvas 태그를 넣는다. 화면은 전체화면으로 바꾸고 캔버스에 색상을 넣었다. index.js를 모듈 타입으로 불러온다. DOCTYPE html> Canvas Particle html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; } canvas { background-color: red; } index.js에 canvas를 불러오고 콘솔로 찍어 잘 불러졌는지 확인한다. const canvas = document.querySelector('canvas') console.log(canvas); 이때 캔버스의 기본 사이즈가 300*150인걸 확인할 수 있다. 캔버스에..