gaki gaki

출처: https://notyu.tistory.com/m/64 1. 오브젝트 풀링(Object pooling) 오브젝트 풀링은 개체를 할당하고 파괴하는 대신, 미리 오브젝트 집합(Object Pool)을 생성하고, 필요할 때에 불러와 사용하고, 사용한 개체를 다시 개체 집합에 반환하여, 개체들을 재사용하는 디자인 패턴 중의 하나이다. 오브젝트 풀링은 미리 생성된 개체를 재사용하므로 개체를 생성하고, 파괴하는데 드는 시간 및 비용의 낭비를 줄일 수 있다. 오브젝트의 생성 및 파괴는 자원의 낭비가 심하다. 게다가, 오브젝트의 파괴는 가비지 컬렉션(Garbage Collection )을 호출하게 된다. 가비지 컬렉션은 시스템에서 자동으로 호출되며, 수집 과정은 상당한 CPU 시간을 요구한다. 최적화와 관련된 ..

[Html canvas] devicepixelRatio 를 사용해 선명한 이미지 렌더링하기 안녕하세요. gaki 입니다. 오늘은 devicepixelRatio 에 관하여 포스팅해보겠습니다. devicepixelRaio 는 물리적 픽셀과 논리적 픽셀의 비율을 나타냅니다. 그럼 이 devicepixelRatio 가 어떻게 canvas 에 사용되어 선명한 화질을 만들 수 있는 지에 대해 알아보겠습니다. 1. devicepixelRatio 의 정의 2. canvas 에서 devicepixelRatio 의 사용 이유, 실습 1. DevicepixelRatio 의 정의 devicePixelRaio 는 앞서 말했듯 물리적 픽셀과 논리적 픽셀의 비율을 나타냅니다. 물리적 픽셀이란, 디바이스가 실제로 가지고 있는 픽셀이..

HTML Color-picker 만들기 컨버스에 이미지를 띄운 다음, 이미지에 마우스를 가져가면 해당 마우스 포인터의 색깔을 추출해서 알려준다. 이는 2가지 로직만 알고 있으면 쉽게 구현할 수 있다. 1. 캔버스에 이미지 삽입하기와 같은 방식으로 캔버스 ctx 에 이미지를 삽입 할 수 있으며, drawImage 는 여러 속성이 있으므로 때에 따라 골라서 사용할 수 있다. this.img = new Image(); this.img.src = "./starryNight.jpeg"; this.img.onload = () => { this.ctx.drawImage(this.img, 0, 0); }; 2.마우스 위치에 있는 컬러 추출하기getImageData(mouseX, mouseY, 1, 1); 로 마우스가 ..