728x90

2024/05 18

[Canvas] 캔버스 resize

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..

Frontend/Canvas 2024.05.22

[Canvas] dat.GUI 사용하기

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

Frontend/Canvas 2024.05.22

[Canvas] svg 필터 입히기(feGaussianBlur, feColorMatrix) | Gooey Effect

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

Frontend/Canvas 2024.05.21

[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.height = canvasHeight * dprctx.scale(dpr, dpr)  이번엔 파티클을 그리기 위해 arc 메서드를 사용한다.먼저 ctx.beginPath()로 Path를 그릴 것을 선언한다.ctx.beginPath()ctx.arc()로 원을 그린다. h..

Frontend/Canvas 2024.05.20

[백준 자바] 2738번(행렬 덧셈)

난이도 - 브론즈 3 문제N*M크기의 두 행렬 A와 B가 주어졌을 때, 두 행렬을 더하는 프로그램을 작성하시오.입력첫째 줄에 행렬의 크기 N 과 M이 주어진다. 둘째 줄부터 N개의 줄에 행렬 A의 원소 M개가 차례대로 주어진다. 이어서 N개의 줄에 행렬 B의 원소 M개가 차례대로 주어진다. N과 M은 100보다 작거나 같고, 행렬의 원소는 절댓값이 100보다 작거나 같은 정수이다.출력첫째 줄부터 N개의 줄에 행렬 A와 B를 더한 행렬을 출력한다. 행렬의 각 원소는 공백으로 구분한다.   n * m 크기의 2차원배열을 생성하고 첫 번째 행렬을 배열에 저장한다. 두 번째 행렬을 읽음과 동시에 배열의 값과 더하고 Stringbuffer에 저장한다.import java.io.*;import java.util.S..

백준/Java 2024.05.05

[CSS/JS] cursor follower 만들기

js로 커서 팔로워를 만들 수 있다. 먼저 html에 cursor 클래스 div 태그를 생성한다. css로 팔로워를 꾸민다. 나는 분홍색 원으로 만들었다..cursor { z-index: 100000; position: absolute; width: 15px; height: 15px; background-color: rosybrown; border-radius: 50%; pointer-events: none; transition: transform 0.15s ease; transform: scale(1);} mouse_follower.jsdocument.addEventListener("DOMContentLoaded", function () { cons..

Frontend/HTML\CSS 2024.05.03

[CSS] 스크롤바 커스텀하기(-webkit-scrollbar)

현재 만들고 있는 사이트평범한 스크롤바인데 한번 커스텀해보자  -webkit-scrollbar : 스크롤바의 스타일을 지정한다body::-webkit-scrollbar {    width: 8px;} -webkit-scrollbar-thum : 스크롤바의 손잡이 부분의 스타일을 지정한다body::-webkit-scrollbar-thumb {    height: 30%;    background-color: rgb(220, 193, 193);    border-radius: 10px;} -webkit-scrollbar-track : 스크롤바의 트랙 부분의 스타일을 지정한다body::-webkit-scrollbar-track {    background: rgb(240, 236, 236);}

Frontend/HTML\CSS 2024.05.01
728x90