목록canvas (3)
솔미는 성장중
Canvas 태그를 사용해보자 (3) - 폭죽 파티클
해당 작업을 하면서 새롭게 배운 부분 또는 정리해두면 좋을 내용만 자세히 작성하였다! (여기 코드만 보고는 전체를 이해하기는 힘들 것 같다. 풀 코드와 함께 보는 것을 추천한담.) https://github.com/SOL-MI/Canvas-Practice/tree/main/2.%20%EB%B6%88%EA%BD%83%EB%86%80%EC%9D%B4 원 모양으로 폭죽 퍼지게 하기 // utils.js export const hypotenuse = (x, y) => { return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2)); }; // index.js createParticles(x, y, colorDeg) { const PARTICLE_NUM = 400; for (let i..
Canvas 태그를 사용해보자 (2) - gooey 효과를 적용한 무작위 파티클 만들기 !
index.html은 크게 수정할 게 없으니 1번 글을 참고하자! index.js에서 우선 arc를 이용해 원을 그려준다. const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const dpr = window.devicePixelRatio; const canvasWidth = 300; const canvasHeight = 300; canvas.style.width = canvasWidth + "px"; canvas.style.height = canvasHeight + "px"; canvas.width = canvasWidth * dpr; canvas.height = canvasHeight * dpr; c..
Canvas 태그를 사용해보자 (1) - 사이즈 조절하기
우선, index.html에 canvas 태그를 하나 만들어준다. (id는 나중에 css를 적용시키기 위해 넣어준거라 일단은 중요하지 X) 전체 코드를 먼저 보여주고, 자세한 설명은 아래에서 확인해주세요. // index.html // index.js const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); //그리는 도구 console.log(ctx); const dpr = window.devicePixelRatio; // dpr이 높을수록 선명한 그래픽 (dpr=1이면 1픽셀그리는데 하나 사용, dpr=2면 1px에 2*2로 구성) const canvasWidth = 300; const canvasHeig..