abcdefghklpqrstuvwxyz

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 라이브러리로, 웹 애플..

* 현재 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..

캔버스를 사용하기 위해 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인걸 확인할 수 있다. 캔버스에..